I want to have a new folder containing a set of new html files. All the images inside it are in the format src="image.png"
and image.png
is located in the root folder. But when you put the HTML file in a new folder it can't find the image. You have to have it in the format src="../root folder/folder/image.png"
to make it work. Which would mean a lot of pasting. I have tried putting image.png
inside the folder but no change.
Yes, prefacing the URL, in the href or src attributes, with a / will make the path relative to the root directory. For example, given the html page at www.example.com/fruits/apples.html , the a of href="/vegetables/carrots. html" will link to the page www.example.com/vegetables/carrots.html .
As such, the index. html file should always be placed directly within the root directory, not in any sub-folders. Side note: Any folder can have its own index. html file, and a browser directed to that folder with no specific file specified will display index.
In most cases, your store's root folder is located in the “home” folder. However, if you can't find it, please use the path “/sub_folder/site_root_folder” to access directly to your root directory.
The root directory of your website holds the content that loads when visitors type your domain name in a browser. For example, you need to put your index file in your website's root directory for visitors to see your site. Website-related applications might also need to know your website's root directory.
Use the <base>
element. It allows you to specify a URL for all relative URLs in a page.
For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>
The link in the this example would be a link to "http://www.example.com/news/archives.html".
For you, the base URL may be something as simple as <base href="http://www.yoursite.com/">
. This would make images specificed as src="image.png"
resolve as "http://www.yoursite.com/image.png"
See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With