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