1. Computing

Discuss in my forum

Adding Images and Uploading Them to Your Web Pages

Getting Images to Display on Your Website

By

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.

But getting your image to the hosting service is only the first step. Then you need to add it to an IMG tag in the SRC attribute. For example:

<img src="http://www.hostingprovider/path/to/image.gif">

Start with Images in the Same Directory as the HTML

  1. upload your image, image.gif, to the root of your website
  2. add an IMG tag to your HTML pointing to that image: <img src="image.gif">
  3. upload your HTML file to the root of your website
  4. 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.

The SRC attribute of your IMG tag should never start with C:\ or 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.

Current Web Deisgn and HTML Articles

©2014 About.com. All rights reserved.