PageResource.com - Web Development Tutorials

Broken Images

Troubleshooting image problems
So, you have images on your page that just will not show up, and you are ready to have some choice words with your computer. You don't really want to mess up your computer, do you? Well, maybe this little guide will help you figure it out!

Let's start out by checking out what a broken image may look like. In older versions of Netscape, you get the little grey paper with the bottom corner torn and some colorful shapes on it. In IE, you get a little white box with a red "x" inside of it. Below is what they might look like:

broken image: NS broken image: IE
Broken Pic in Netscape Broken Pic in Internet Explorer

Now, to get rid of these little "broken image" symbols, we need to figure out what is causing the problem. Well, let's start with a Web page that you have live on the Web. We will work with pages that are offline a little later.

Online Image Solutions

1) Make sure the image is on your Web server.

Before you check your code, be sure you have uploaded the image to your Web server. Images are not sent automatically when you upload your Web page. You will have to upload each image you want to use.

Geocities and some other free homepage servers allow you to look at the files you have on their server through your Web browser. Check to see if the image file is listed. If not, upload it the same way you did your Web page. It should show up on the list afterward.

Some servers require you to use FTP to upload your files. If this is the case, you can look for the image file by connecting to the server with your FTP program and looking through the list of files in the "Remote Host" area. Again, if the file is not listed, upload it to the Web server.

Once you have the file on your Web server, reload your Web page in your web browser. If this fixes the problem, you are ready to go! If not, read on: There could be other problems as well...

2) Make sure the image tag has the correct URL for the image.

A typical image tag looks like one of these:

<img src="mypic.gif" />
<img src="http://www.someplace.com/~me/mypic.gif" />

The first tag uses a shortcut that keeps you from typing out the entire URL everytime. The trick here is that your Web page and your images must be on your Web server and they must be in the same directory as the HTML page on your Web server. So, if you upload everything into one directory (this is usually the default anyway), just use the name of the image rather than the long URL. There will be less chance of a mistake. Also, keep in mind the image file name is case sensitive. Even a slight change in case or spelling can lead to a broken image. Each of the image filenames below is a different image to your browser:

mypic.gif
MYPIC.GIF
Mypic.gif
MYPIC.gif
mypic.GIF
MyPic.gif
mtpic.gif

So, be certain you have the image tag with the exact same case and spelling you see in your list of files on your server. In some cases, a server or FTP program may change the case of the filename. Double check for this on the Web server and rename the file if you need to do so.

Now, if you used a full URL address, take the same steps as above, but check the entire URL along with the filename. If it links to the wrong server or directory, the image will not show up. Again, if the case or spelling is different, you will need to correct it to fix the broken image.

3) What if the image is on another server?

I don't tend to recommend using images from another server simply because the server that houses the image may be down while your server is working! If this happens, you will either get a broken image or your page will hang while it is loading. There are exceptions though. You may want a free counter, a free guestbook, or maybe have advertising on your site. These are OK, but they will require you to display an image from their server on your site. The best advice here is to be sure to use reliable services when you get these extra things. They should send you the proper code— and that you can cut and paste with no problem. Of course, if their server goes down- you get a broken image.

If you are "borrowing" the image from another site, it's best to have permission of the owner of that site. Otherwise, you will likely get a broken image sooner or later. They will change the name of the file or put it in a protected directory, and that will give you a broken image.

Offline Image Solutions

1) Small Sites: Use one directory.

If your site is not very large, keep everything in a single directory on your hard drive, as well as on your Web server. This will make everything as simple as possible so as to avoid confusion. So, take all of your HTML files and images and place them in a directory you can find easily. Maybe something similar to c:\webpage would be a good spot. After that, use a local link to all of your images by typing only the filename of the image into the image tag:

<img src="mypic.gif" />

Now, all of your images should show up just fine, and you will not have to change all of your image tags when you put the page online!

2) Large Sites: A bit tougher.

If you want to separate your site into various dirctories for organization, this can give you a hard time when you are trying to work offline. This is due to your computer having a different directory structure than a Web server. A shortcut like the one below would go to the top directory of your HTML documents on a Web server, but would typically go back to your c:\ drive on your computer:

<img src="/images/mypic.gif" />

The issue here is that while on the server this link might go to http://yoursite.com/images/mypic.gif, on your computer it would likely go to c:\images\mypic.gif. If your HTML file is in c:\webpage and the image you want is in c:\webpage\images, this can really throw you off if the browser is looking for c:\images.

The easiest fix in this case is to tell the browser not to go to the top directory, but rather to the images directory below the webpage directory. If your HTML file is in c:\webpage and the image you want is in c:\webpage\images, you could write the image tag like this:

<img src="images/mypic.gif" />

On the other hand, If your HTML file is in c:\webpage\html and the image you want is in c:\webpage\images, you'll need to tell the browser to go back up one directory and then go into the images directory. You would write that like this:

<img src="http://www.pageresource.com/images/mypic.gif" />

Likewise, if you need to go back up two or more directories, you would add an additional "../" for each directory. So, to go up two directories, you could use:

<img src="http://www.pageresource.com/images/mypic.gif" />

Hopefully these tips help to tackle your broken images!


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy