How to properly reference local resources in HTML?

Question

As it turns out, referencing local resources can be a rub point for some. I'm looking for a canonical answer to local resource referencing, and what they mean.

Take these examples, what is the difference between these reference paths?

<img src="myfile.png" /> (no leading slash)
<img src="/myfile.png" /> (with leading slash)
<img src="folder/myfile.png" /> (no leading slash / in subfolder)
<img src="/folder/myfile.png" /> (with leading slash / in sub folder)
<img src="../folder/myfile.png" /> (with dots and a leading slash / in sub folder)

In all cases these are paths relative to the HTML document's base directory, which is the URL from which the document was loaded. If the document was loaded from a web URL, all URLs are resolved in relation to that host. Absolute paths are resolved relative to the root of the site, relative URLs are relative to the path of the page on which they appear. URLs will resolve to local resources only if the page was loaded from a local HTML file (usually expressed as a file://... URL). — Jim Garrison, Jan 23 '13 at 21:02
@JimGarrison Yep, this doesn't take into consideration the act of loading the files on the local computer without a web server. — Chase Florell, Jan 23 '13 at 21:06

score 121 · Accepted Answer · edited Jun 08 '21 at 23:39

A leading slash tells the browser to start at the root directory.
If you don't have the leading slash, you're referencing from the current directory.
If you add two dots before the leading slash, it means you're referencing the parent of the current directory.

Take the following folder structure

demo folder structure

notice:

the ROOT checkmark is green,
the second checkmark is orange,
the third checkmark is purple,
the fourth checkmark is yellow

Now in the index.html.en file you'll want to put the following markup

<p>
    <span>src="check_mark.png"</span>
    <img src="check_mark.png" />
    <span>I'm purple because I'm referenced from this current directory</span>
</p>

<p>
    <span>src="/check_mark.png"</span>
    <img src="/check_mark.png" />
    <span>I'm green because I'm referenced from the ROOT directory</span>
</p>

<p>
    <span>src="subfolder/check_mark.png"</span>
    <img src="subfolder/check_mark.png" />
    <span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>

<p>
    <span>src="/subfolder/check_mark.png"</span>
    <img src="/subfolder/check_mark.png" />
    <span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>

<p>
    <span>src="../subfolder/check_mark.png"</span>
    <img src="../subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>

<p>
    <span>src="subfolder/subfolder/check_mark.png"</span>
    <img src="subfolder/subfolder/check_mark.png" />
    <span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
    <span>src="/subfolder/subfolder/check_mark.png"</span>
    <img src="/subfolder/subfolder/check_mark.png" />
    <span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>

Now if you load up the index.html.en file located in the second subfolder
http://example.com/subfolder/subfolder/

This will be your output

enter image description here

How to properly reference local resources in HTML?

1 Answers1

Linked

Related