user2839497 user2839497 - 1 month ago 12
HTML Question

Why the forward slash in image source is not working?

I've a folder titled 'html_playground' inside folder 'www' which is my web root directory of Wampserver.

Inside the directory 'html_palyground' I have a a file titled 'demo.html' which contains following HTML code :

<!DOCTYPE html>
<html>
<body>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>


Inside the folder 'html_playground' there is another folder titled 'images' that contains an image file titled 'html5.gif'

When I hit the URL
http://localhost/html_playground/demo.html
in my browser I'm not able to see the image html5.gif. Why so?

Then I tried with following HTML code :

<img src="images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">


Then the image got displayed.

So, my question is why it's not working when I add forward slash at the beginning of src attribute's value? Am I making any mistake by adding a forward slash at the beginning of value of src attribute?

When should forward slash at the beginning in value of src attribute of image tag?

Someone please help me.

Thanks.

Answer

The forward slash at the beginning instructs the browser to resolve the path relative to your web root directory on http://localhost/

As you mentioned in your comment this would correspond to the www/ directory on your file system. So /html_playground/images/html5.gif should work

Basically the forward slash is just appending the specified path to the domain.