Troubleshooting Paths to Images and other Pages

1
Troubleshooting Paths to Images and other Pages

• Do 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 will help you figure it out!

2
Troubleshooting Images

• Let's start out by checking out what a broken
  image looks like in both browsers. In 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.
• Now, to get rid of these little 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.

3
Make sure the image tag has the correct URL for
the image

• A typical image tag looks like one of these
  ltimg src"mypic.gif"gt ltimg src"http//www.somep
  lace.com/me/mypic.gif"gt
• 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 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.

4
Troubleshooting Images

• 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.

5
Suggestion 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 close to the same as possible so as to avoid
  confusion. Also, browsers tend to have trouble
  displaying things offline when they are in other
  directories. So, take all of your html files and
  images and place them in a directory you can find
  easily.
• 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!

6
Using an Image Directory

• If you want to separate your site into various
  directories for organization, this can give you a
  really hard time when you are trying to work
  offline. Why? Both web browsers have their
  limitations working offline. If you are using
  Netscape, the only way I can see to view
  everything offline is to throw it all into the
  same directory. Otherwise, your interior links
  won't work, and you will be stuck with broken
  images. IE also has some troubles, but it is more
  flexible with offline browsing. In IE, you can
  use shortcuts to the directories and filenames.
  For example ltimg src"/images/mypic.gif"gt

7
Why?

• The problem IE starts its search for the file
  from your root directory. In other words, it is
  looking for 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. Of course you can fix the image tag, but you
  will have to redo the tag before you upload the
  page to your server.

8
One Possible Work-Around

• There are ways around this, especially with IE,
  but they are a bit more complicated than you may
  want to deal with. Some people create a new drive
  letter on their computer j\ (virtual hard drive)
  and moved the web page files there. Thus, the
  root directory is in the right spot, and you can
  use the same image tags online and offline.

9
If you have an Image folder
10
My links look like this...