Troubleshooting Image Problems

A question we hear often on mailing lists is "I've uploaded/published my pages but my images don't show." Images are actually very easy to troubleshoot, but it does take a little investigation to find out WHY they are not displaying. A few tips before you start might save you trouble later.

  • Make sure your images are within your website folder on your hard drive BEFORE you start using them in your pages.
  • Save your page BEFORE you start inserting the images.
  • Name your image files in all lowercase with no spaces. If you name them using CAPS and accidently tick change file names to lower case when you use file manager or ftp, your file names will be changed BUT your links will not.
  • Create a folder for your images rather than saving them to the root directory.

Each of the images shown below has been saved with a different file name. They were named with a mixture of file names and ALL of them published to the RootWeb servers. The last image on the right should be missing. What you see will depend on the browser you are viewing this page with. With Internet Explorer, you will see a red x; with Firefox and Opera the alt tag will be displayed. NOTE: In the latest version of Firefox (17), there is no sign the image is even missing!

File name katie-sm.jpg
katie-sm.jpg (lowercase-no spaces)		 File Name Katie sm.jpg
Katie sm.jpg (includes space)		 File Name KATie_sm.JPG
KATie_sm.JPG (Mixed Case)
 File name katie-sm.jpg
This image is missing! Why?

When you have a broken image, check the following:
  • Make sure the image is on your web server. Type in the URL/URI of your image. Can you see it? No, then something is wrong.  When you publish your files, make sure ALL your images are uploaded to the server.
  • Make sure the image tag has the correct URL for the image. Right-click on the broken image in your browser (image 1) and then left-click on "Properties".  This will bring up the Properties Sheet for the image.  The thing you want to look for is the "Address" or "Location" for the image.  This is where the web browser THINKS the image is located. In FrontPage, the pictures property box (image 2) will show where the image is located in relation to the the files on your website.

    Screenshot image properties.  FrontPage picture properties box.

    A little analysis of the url will tell you a lot. This is the url from the browser image properties for the missing image shown above. http://freepages.genealogy.rootsweb.com/~gearyfamily/frontpage/katie-sm.jpg
    The first part is the url of your site  freepages.genealogy.roosweb.com and your account name ~gearyfamily  /frontpage/images is the directory structure and katie-sm.jpg is the actual file name. The picture property box in FrontPage (image 2) indicates the file name katie-sm.jpg is in the same directory as the page it is inserted in. The image is actually located in a directory called images within the frontpage directory.
  • Using FrontPage, or file manager or your FTP program, log into your account, browse to the location where your file is SUPPOSED to be and determine if it is in that location.  If not, then you have solved the mystery.  If you are like me and keep your images in a folder called images, check that folder and see if the file is there. If it is, then adjust the source to point to the correct location.
  • If the file is in the correct location and it still does not show on your page, check the file name closely. Are there any case differences?  The Rootsweb servers treat upper case and lower case as different whereas windows servers treat it as the same.  So katie-sm.jpg is a different file than Katie sm.jpg or KATie_sm.JPG. Are there any extension differences?  While windows servers will treat .jpg the same as .jpeg, again the Rootsweb servers treats them as different. Make sure the spelling is exact.  Something named katie.jpg and katy.jpg may look the same at  first glance.  Check your spelling closely. Check your case - upper and lower.
  • Occasionally, the problem may be a corrupted file.  Check your computer for a good copy of the file and try uploading JUST THE FILE using your FTP program to the file location, overwriting the file that is on the server.
  • More often than not, the location of the file is the problem.

     

    Additional Resources for Troubleshooting Images