WebDevelopersNotes logo

home-icon Home / Web Development / Why are images not displaying on web site?

Why are images not displaying on web site?

Why are images not displaying on web site?

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.

Images not displaying on a web site? Troubleshooting tips for your problem

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.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

  • Nisha Jacob on July 18th, 2010 9:15 pm

    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

  • Lebanon on September 1st, 2010 1:26 pm

    Another reason would be changing the location/directory of the images without changing the path in the html document.

  • Jayvin on February 10th, 2011 10:48 pm

    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.

Internet Explorer jokes and funny images

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

The popular Dancing Baby animation which went viral in the 1990s employed no motion capture. Everything was created and rendered on the computer. The video was created using Autodesk 3ds Max (formerly 3D Studio Max). It was made by the team that had developed Character Studio, a tool for the 3D computer graphics program. The popularity of the Dancing Baby soared after John Woodell, a web developer, created an animated gif from the original movie and put it up on his employers web site. From there, the highly compressed animated gif file spread quickly around the world and started appearing on other web sites, commercials, music videos and even TV programs. Image Source: By [1], Fair use, https://en.wikipedia.org/w/index.php?curid=17625870 [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy