Relative path in HTML

Question

I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).

website is located in

http://localhost/mywebsite

I read this useful question Absolute vs relative URLs.

I found differences between /images/example.png and images/example.png

<a href="/images/example.png"> Link To Image</a>

Above relative path should return ROOT_DOCUMENT/images/example.png because of / at first of url. As ROOT_DOCUMENT is something like /wamp/www/mywebsite

But when I tested it, it only return /wamp/www/images/example.png

And I should add manually my website folder /mywebsite/images/example.png to relative path.

<a href="mywebsite/images/example.png"> Link To Image</a>

And it is not useful because of changing the name of mywebsite. So:

• Why does this problem occur?
• How can I resolve this problem?

Solution 1

You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:

Absolute path

If you use an absolute path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the pictures folder:

"/mywebsite/pictures/picture.png"

And it would be the same as:

"http://localhost/mywebsite/pictures/picture.png"

Relative path

A relative path is always relative to the root of the document, so if your html is at the same level of the directory, you'd need to start the path directly with your picture's directory name:

"pictures/picture.png"

But there are other perks with relative paths:

dot-slash (./)

Dot (.) points to the same directory and the slash (/) gives access to it:

So this:

"pictures/picture.png"

Would be the same as this:

"./pictures/picture.png"

Double-dot-slash (../)

In this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:

"../picture.png"

You can play around with them as much as you want, a little example would be this:

Let's say you're on directory A, and you want to access directory X.

- root
   |- a
      |- A
   |- b
   |- x
      |- X

Your URL would look either:

Absolute path

"/x/X/picture.png"

Or:

Relative path

"./../x/X/picture.png"

Solution 2

The easiest way to solve this in pure HTML is to use the <base href="…"> element like so:

<base href="http://localhost/mywebsite/" />

Then all of the URLs in your HTML can just be this:

<a href="images/example.png">Link To Image</a>

Just change the <base href="…"> to match your server. The rest of the HTML paths will just fall in line and will be appended to that.

Solution 3

The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.

If the URL of your website is: http://www.example.com/mywebsite/ then starting at the root level starts above the "mywebsite" folder path.

Comments

[Giacomo1968]

What language? Pure HTML?

[Amir]

Yes, it is in Pure HTML

[Alvaro Montoro]

This happens to me all the time when I use wampserver. Not an expert on how Apache/Web server works, but the idea is that the server operates over /var/www/ (its root) and your site is a subfolder within it. so if you put the / to make it absolute URL, then it takes the root that is /var/www/ (no subfolders) and you still need to add the folder where your web application is.

[Alexander Kononenko]

Put here virtualhost block of your apache config.

[Giacomo1968]

/var/www/ is simply the directories on the server. The relative path of a front-facing URL has 100% nothing to do with that.

[DA.]

If you're starting your href's with / then that's not a relative path...that's site-root.

[Giacomo1968]

@DA. Correct. But if that is used with the <base href="…"> tag, that would work.

[Amir]

Thanks a lot, So If I transfer my codes to a host then this line refers to root of document "/pictures/picture.png" & everything works true ?