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).

If the images are stored in the root folder (the same folder as index.html), use a path such as this:
img src="keylinertopbanner-810.png"


If the images are stored in a subfolder (which is what I do:  "indeximagesfolder"), the html tags use a relative path -- one without a leading slash, and without 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">


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 (or change the casing in your html code). 

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 "keylinerTopBanner-810xx.png", 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?)