XAMPP relative urls not working correctly

Question

on http://www.exampleSite.com/aPage.php, the following image loads correctly

<img src="/images/sidenav/analysis-2.gif" />

but at http://localhost/exampleSite/aPage.php, it tries to get localhost/images/... instead of localhost/exampleSite/images/...

My file structure is:

C:\xampp\htdocs\exampleSite\

I have had this problem across multiple projects, and have previously resorted to absolute URLs, but now I am just trying to make some quick updates on a page, and I cannot view it correctly on my localhost.

Answer 1

If you don't want to mess up with the src attributes throughout your website, you may consider changing configuration directives.

You can relocate it by editing the DocumentRoot setting in C:\xampp\apache\conf\httpd.conf.

It should be currently set as :

C:/xampp/htdocs

Change it to:

C:/xampp/htdocs/exampleSite

and your relative link as <img src="/images/sidenav/analysis-2.gif" /> should be working fine.

NOTE:

• Don't forget to restart your XAMPP Server after making changes.
• After these changes, your leading / will always direct to the exampleSite folder. Should you decide to change the root later, repeat the process for the root folder of your choice.

Answer 2

Remove the first / so that it becomes

<img src="images/sidenav/analysis-2.gif" />