
Originally Posted by
g1smd
It is the browser that resolves the URL for images.
If the image is referred to as "/images/some-image.png" with a leading slash then it will always be pulled from the /images/ folder in the root of the site.
If the image is referred to as "/zencart/images/some-image.png" with a leading slash then it will always be pulled from the /images/ folder inside the /zencart/ folder in the site root.
If the image is referred to as "zencart/images/some-image.png" without a leading slash then the location will be deemed to be relative from the folder of the currently viewed HTML page.
With relative linking, for the page at "/localhost/Zencart/Battery-Backup-UPS-Power-Protection/Power-
Saving-Back-UPS-ES-8-Outlet-550VA-230V" the zencart folder for images is therefore deemed to be inside the "/localhost/Zencart/Battery-Backup-UPS-Power-Protection/" folder.
With relative linking, for the page at "/localhost/Zencart/Power-Saving-Back-UPS-ES-8-Outlet-550VA-230V" the zencart folder for images is therefore deemed to be inside the "/localhost/Zencart/" folder.
That is, when the location of the image is specified without a leading slash, the URL for the HTML page is stripped back to the final slash, and the location of the image is added to the end of that.
The solution is to refer to all image, css, and JS files with a leading slash. Always.
Never use notation like "somelocation/somefile.png" on your site. Always begin with a leading slash.
Never use notation like "../somelocation/somefile.png" on your site. Always avoid the double dots.
Bookmarks