2023-09-05

Problem - Graphics not displaying on Apache Webpage

Problem - Graphics not displaying on Apache Webpage
Problem - Graphics not resolving on web page
Problem - Images not displaying on page

Symptoms:

When the page is opened locally on Windows, all works properly.
But once uploaded to the server, graphics show as text or as 'images not found.' 
html code <img src="filename"> tags look good and work locally
Graphics can be in the root folder or in a subfolder

Assumes this is a Linux webserver, running Apache2
My system happens to be a Raspberry Pi.

Solution - Use relative paths:

This is not a rights problem, especially if the html and graphics are loaded in /var/www/html (a standard, default folder for webpages).

I stored my images in a subfolder.  "indeximagesfolder". 
If using a subfolder, the html tags must use a relative path.  Do not use a leading slash, do not use a fully-qualified path (such as /var/www/html/indeximagefolder/filename.ext

example, showing a subfolder, with no leading slash, and no fully-qualified path.  This is a proper relative path:
<img src="indeximagesfolder/keylinertopbanner-810.png">

If your images are in the root folder, the same folder as index.html:
img src="keylinertopbanner-810.png"


Solution - Case-sensitive file names:

It took two days to figure out the real problem.  On Linux servers, filenames are case-sensitive, both in the html code and in the actual filename.  With Linux, most use lower-case filenames but on Windows, the original filename is typically mixed case.

<img src="IndexImages/keylinerTopBanner-810.png">  is not the same as
<img src="indeximages/keylinertopbanner-810.png">

Make the Windows filenames all lowercased.  Windows will not rename a file if you change nothing but the case (if you try, it ignores the rename, thinking the file's name didn't really change).  Instead, rename the file with a dummy character "xindeximages/keyliner.....", press Enter, then rename a second time with the desired casing. 

Confirm the html code is the same case, including folder names.
Then re-load to the server.

Other keyliner articles:
Build a personal webserver and save hosting fees.
https://keyliner.blogspot.com/2023/09/install-raspberry-pi-webserver-step-by.html

No comments:

Post a Comment

Comments are moderated and published upon review. (As an aside, not a single spam has been allowed through; why bother?)