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