If you want your images to be seen by people, you need to put them on a hosting server, just like your HTML documents. My article Uploading Your Pages, explains how to use an FTP client to upload to a web server. But if you're using a web hosting service, you will probably need to use an upload form provided by them. These forms are typically in the administration section of your hosting account.
Start with Images in the Same Directory as the HTML
- upload your image,
image.gif, to the root of your website
- add an
IMGtag to your HTML pointing to that image:
- upload your HTML file to the root of your website
- test the file by opening the page in your web browser
But it is more common to store images in a sub-directory, typically called
images. In order to point to images in that directory you need to know where it is in relation to the root of your website.
The root of your website is where the URL, without any directories on the end, displays. For example, the root of this site is at
http://webdesign.about.com/. Notice the slash at the end. This is how the root of a directory is usually indicated. Sub-directories include that slash to say where they sit in the directory structure. For example, a site might have the structure:
/—the root directory
/about/—the “about” directory
/products/—the “products” directory
/products/documentation/—the “documentation” directory under the products directory
/images/—the “images” directory
Then, when you point to your image in the
images directory, you would write:
<img src="/images/image.gif">. This is called the absolute path to your image.
Common Problems with Images Not Displaying
Getting images to show up on your web page can be challenging at first. There are many possible reasons an image doesn't display. The most common reasons are that the image was not uploaded where the HTML is pointing, or the HTML is written incorrectly.
The first thing to do is see if you can find your image online. Most hosting providers have some type of management tool that you can use to see where you uploaded your images. Once you think you have the correct URL for your image, type that into your browser. If the image shows up, then you have the correct location.
Then check that your HTML is pointing to that image. The easiest way to do that is to just paste the image URL that you just tested into the
SRC attribute. Re-upload the page and test.
SRC attribute of your
IMG tag should never start with
file:. This will appear to work when you test your web page on your computer. And it may even work when you upload the HTML to your web hosting service. But everyone else who visits your site will see a broken image.
This is because the
C:\ points to a location on your hard drive. Since the image is on your hard drive, it will display when you view it, but it is very unlikely that anyone else has the exact same image in the exact same location, and so they will see a broken image.