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:sitesthissite"
When you included them in your pages you may have coded
something like:
<img border="0" src="C:sitesthissitepicture.jpg">
Now that they’re up on the server the actual folder pathname
might be something like
F:cutomersusisp1johnnyhomewebsite
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:sitesthissite"! 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!
