The Red X Dilemma

By Vince Barnes

The Nature of the Dilemma

Here's the problem: you've worked on your pages and got them just the way you want them.  They look great on your computer, so you upload them to you website host's server, but when you look at them on the real site, none of the pictures or graphics show up.  Instead you have a box with a little red X in it.  GRRRRR!!!

So what's causing the problem?  Fundamentally, the problem is occurring because the web server can't find the picture (or graphic) to include it with the page it's sending down to the browser.  "OK, Vince.....  that's fine.... but why isn't it finding it?"  So glad you asked!  Let's look at the possibilities.

The cause is either that the picture file is being referenced by its name only and the picture file is not in the same directory as the web page file, or, the picture file reference includes a path which is not the correct path on the server for the location of the picture file.  We'll get into each of these in turn.


File Not in Web Page Directory

When a picture file is referenced by its filename only, the picture file must be in the same directory (folder) as the web page file (the html file) that references it.  A common cause for it not to be there is that it was never uploaded.  I talked about a frequent reason for this in a recent Goodies To Go newsletter (subscribe over there on the right!)  Here's the salient extract:
 

I sat down with a young HTML student recently as they studied the addition of pictures to a page and went through the entire process including the upload to the server. I was in observation mode only and did not interfere or help in any way -- I wanted to observe the thought process in action. This student fell right into it -- after uploading the page they got the red 'X' and no picture. The reason? That's right, they uploaded the page file but not the picture file.

Talking with them about it afterwards they told me that they didn't need to upload the picture file as well because it was already included in the page -- they knew because they could see it there.

Such a simple conceptual misunderstanding, but perhaps it shouldn't be so surprising. If you add a picture to a Word document, or to a spreadsheet, etc., it actually does include the image in the document itself. It is not necessary to keep the image file along with the document. In fact, you can create a "link" to an external image file if you wish to, but you have to go out of your way to do it. The most common result is for the word processor or spreadsheet program to copy the image data right into the document. This is the opposite of web page creation.


Now if you were a Goodies To Go reader, you would have already known that!  If this was your problem, whether or not this was the reason for the problem (maybe you just forgot to upload them!) simply upload your picture file(s) to the directory or directories where the files that reference them are located and your red Xs will vaporize.  Note that if you have two (or more) pages in different directories that reference the same picture file, you will have to upload another copy of the picture file into each and every directory where there is a page that references it (yes, that's right -- this is going to create a maintenance nightmare!!  Read the next discussion for a better way!)


Incorrect Path Name

As Albert Einstein might have put it, this is a problem of relativity!  The web server can't find your pictures where you said they should be. "But," you protest, "they're in the same folder as the pages, just like they were in on my computer. So what gives?" "It's your relatives," I say, helpfully, "or at least, the lack of them."  To explain:

When the pages were on you computer they were in a folder (aka a directory) called (for the sake of this example)

"C:\sites\thissite"

When you included them in your pages you may have coded something like:

<img border="0" src="C:\sites\thissite\picture.jpg">

Now that they're up on the server the actual folder pathname might be something like

F:\cutomers\us\isp1\johnny\home\website

or even

/var/http/custdata/sites/~johnny

depending on your service provider's setup and operating system. In any case, it's highly unlikely to be "C:\sites\thissite"! Hence the path to the picture is invalid and the picture is not found.

What you should have done instead is to address all components of your website relative (there's that word!) to the root folder of the site; that is the folder at the top of your folder (directory) structure and which contains your site's home page. For example, if the picture is in the same folder as the page, it needs no pathname at all, giving a tag like this:

<img border="0" src="picture.jpg">

If the picture is in a folder below the one the page is in, add the folder name (here it's called "images" to the path in the tag like this:

<img border="0" src="images/picture.jpg">

If your page is in a folder at a lower level than the root, say one called "level2", and the image is in a different folder below the root, as in the last example, then your pathname needs to point to its parent folder using "../" (dot, dot, slash) which indicates "my parent folder" (put another way, it means up one level). In this example the tag would look like this:

<img border="0" src="../images/picture.jpg">

which says up one level, down into images and the file name is picture.jpg.

To go up more than one level, you'd use more than one "../" like this:

<img border="0" src="../../images/picture.jpg">

You can also provide the pathname to the correct folder, relative to the root folder, but referencing the root folder with just a slash.  In this way the images folder contained within the root folder would be "/images" giving us a picture file reference like this:

<img border="0" src="/images/picture.jpg">

and one held deeper in the hierarchy might look like this:

<img border="0" src="/level2/level3/images/picture.jpg">

Folks primarily used to Windows might find this kind of relative path naming a little strange at first, but the Unix/Linux mavens out there will recognize it right away -- that's where it was born, after all!

Using relative addressing like this enables the site to be moved from computer to computer without breaking the integrity of addresses within the pages. The relationship between the address of the page and the address of the picture remains the same. Organizing your pictures and pages into a sensible hierarchy of folders can bring lots of other benefits to you also. To get an idea of what I mean, check out this issue of Goodies To Go.


The Unmentioned Cause

Did we cover all the possible causes?  No!  There's always that one other possibility -- a spelling mistake!  The possibility exists, incredibly remote, I realize, that you misspelled either the path or the file name.  If all else seems to be failing, it might just be worth a check, after all, even the greatest of us might just make the occasional smelling mistake!



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •