How do I specify an absolute path?

Question

I wrote this code, but I couldn't get the html. I don't know why. I want to know why this is when the route is not wrong.

<img id = "navLogo" src = "C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/TermProject/imgs/navLogo.jpg"></img>

Answer 1

I believe the source you specify should have path starting from folder where your html is located. So, try something like this "/imgs/navLogo.jpg".

Answer 2

Ray Hatfield's answer is good but I don't have enough rep to comment.

I think you are misunderstanding absolute vs relative paths here.

You are thinking of absolute as starting with your c: drive, but on a web server, the absolute path starts at the root of your site, which is always just a forward slash "/".

Relative paths begin from the current directory of the source file(s) that specify them.

Neither of them can go higher in the file system than your site's root folder.

To put it simply (specifically answering "How do I specify an absolute path?"):

All absolute paths on the web start with a /

All relative paths on the web do not.

Given the path in your example:

C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/TermProject/imgs/navLogo.jpg

A default apache installation considers the site root to be the "htdocs" in this path.

This means that the absolute path / on your website is found at C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/ on your hard drive.

If you have a file C:/Bitnami/wampstack-7.1.27-0/apache2/htdocs/TermProject/index.html then you can access the navLogo image from that page

with an absolute path at:

/TermProject/imgs/navLogo.jpg

or a relative path at (note the missing forward slash):

imgs/navLogo.jpg

Answer 3

For security reasons, websites may not request arbitrary files from your machine's filesystem.

Keep in mind that the way this works is the HTML is sent to the browser and then the browser sends a second request for the image.

In this case the browser would be trying to get the file off of your machine, (which may coincidentally be where the web server happens to be running), but if this site were live on the web and someone else accessed it, their browser would be trying to get this image from that user's machine, not from the website.

If the browser was allowed to serve files from your local filesystem, one could very easily create a site to grab files off of your machine and transmit them elsewhere, creating a MASSIVE security problem.

To fix this you should specify a path relative to the web server's root, which would probably mean:

<img src="/imgs/navLogo.jpg" />

or maybe:

<img src="/TermProject/imgs/navLogo.jpg" />

Note that behavior will be different if you're loading the HTML file from the filesystem (the location is file:…) vs. serving it from a web server (location is http://…). I'm assuming you're doing the former here based on the fact that your image is under an apache directory.