HTML Different link type Question

Question

What is the difference between? Thank you.

<img src="images/file.jpg"></img>

between

<img src="/images/file.jpg"></img>

between

<img src="./images/file.jpg"></img>

between

<img src="../images/file.jpg"></img>

Answer 1

You need to learn about relative and absolute paths.

Here are my explanations for your examples, but you realy should read the link in order to understand the concepts.

If the base URL is "http://example.com/resources/" then:

<img src="images/file.jpg"></img>

Will get:

http://example.com/resources/images/file.jpg

It simply adds the src url to the base URL.

---

<img src="/images/file.jpg"></img>

Will get:

http://example.com/images/file.jpg

Bacuse the image URL is rooted (starts with /) it uses the domain and adds the image src to the domain.

---

<img src="./images/file.jpg"></img>

Will get:

http://example.com/resource/images/file.jpg

In this case, it uses the relative path for the current directory (.), which is the base directory (resources).

---

<img src="../images/file.jpg"></img>

Will get:

http://example.com/images/file.jpg

In this case, it uses the relative path for the parent directory (..), which makes it go up a directory and then add the rest of the path.

Answer 2

The first, third and last ones are relative to the current path. In the last one, .. is the parent folder, which means you essentially ascend one level in the hierarchy, and in the second one . is the current folder, making the URI equivalent to the first one. The second one is relative to the root, since it starts with /. Read more about URIs in the HTML4 spec, or in general about Unix-style paths.

Thus, if you're at website.com/folder/folder/index.html, the four URIs would be equivalent to this:

website.com/folder/folder/images/file.jpg
website.com/images/file.jpg
website.com/folder/folder/images/file.jpg
website.com/folder/images/file.jpg