Your website is indeed very informative… I would be very thankful if you could kindly clear my confusion. My website looks fine when I tested on my computer but when it is loaded at the server and viewed later using IE, some images are not displayed on the web site. I tried with both the GIF and JPG format. Before loading the pages everything is fine… is this a problem with my pages/images or the server?
Lawma
This is a very common problem faced by budding web developers. Things work fine on the local computer but when uploaded to a server, the images just do not display on the web site. To be truthful, I too had a brush with this issue… a decade ago.
Sponsored Links
Here are some troubleshooting tips to help you get the images displayed on the web site when its loaded from the server.
Why aren’t the images displaying?
- Images haven’t been uploaded
Let us not negate this option. It is a possibility that the images were not uploaded or not uploaded properly. When using FTP, ensure you select the binary upload mode. Though most modern FTP programs will handle this on their own, there is no harm in making assurance doubly sure, right?. - Images haven’t been uploaded to the correct directory
You need to confirm whether the images are in the same directory as specified in the src attribute. This, however, concerns only those developers who have segregated images into a separate folder (highly recommended). - VERY IMPORTANT: The problem of the case of letters in the file name or the URL
This is the most common cause of the image not displaying on the web site problem. Those of you who are developing the web site on a Windows based computer and have Unix/Linux on the web server need to take care.
Windows ignores the case of the letters in the file name; for it, MyPhoto.JPG is the same as myphoto.jpg. Unix and Linux are, however, case sensitive. So if the images are loading fine on your computer but fail on the server, check the case of letters in the file names. - Directory name
Continuing the above point, remember, on Unix/Linux directory names are case-sensitive too. - Improper saving of file extensions by image editors
Some image editors are known to use uppercase for file extensions; thus, .JPG instead of .jpg. And as we know from the above points, specifying the incorrect case in the src attribute will affect images being displayed properly from Unix/Linux web servers. - Image file name contains spaces or special characters
This, again, will lead to problems if the operating systems on the local and remote web server are different. I suggest replacing the spaces and special characters with either hyphens (recommended) or the underscore. - Images are huge and you use a very slow internet connection
It will take a long time for very large images to be downloaded on slow internet connection. The web server might just give up and this will result in the box with the red cross or a broken image icon.
By the way, the local computer and the web server do not need to have the same operating system. For instance, I have always developed on Windows and used a Unix/Linux/FreeBSD web server. You just need to keep the case of letters issue in mind and you’ll learn with experience as I have.
Thank you for your help. I was struggling to figure out why the images were not showing up on the website only to realise it was to do with the case sensitivity. Thank you very much
Another reason would be changing the location/directory of the images without changing the path in the html document.
I have a similar problem.
I developed an asp.net website in visual studio on Windows 7, then copied all the files over to a server running XP. All the links to other pages work, but my img, style, and javascript links do not work. My master page holds all these links, so Im guessing its something to do with absolute vs relative urls, but on my default.aspx page, I copied the Image url (right click>copy image url in google chrome, or right click>properties in IE) and this points to the location where the image is on the server. If I navigate to this image url in chrome/IE, it says: You are not authorized to view this page
You do not have permission to view this directory or page due to the access control list (ACL) that is configured for this resource on the Web server.
Please try the following:
Contact the Web site administrator if you believe you should be able to view this directory or page.
Click the Refresh button to try again with different credentials.
HTTP Error 401.3 – Unauthorized: Access is denied due to an ACL set on the requested resource.
Internet Information Services (IIS)
Technical Information (for support personnel)
Go to Microsoft Product Support Services and perform a title search for the words HTTP and 401.
Open IIS Help, which is accessible in IIS Manager (inetmgr), and search for topics titled About Security, Access Control, and About Custom Error Messages.