I've Uploaded My Images but they Still Don't Appear
Question: I have uploaded all of my images to the server but they are not appearing on my page. I don't know what to do?
asked by lots of people
Answer: There are a number of possible causes for this problem and so I'll work through a list of things that it might be and tell you how to check for them and what you need to do to fix it.
First, we're going to need to take a look at the html source of your page. It doesn't matter if you know html or not because I'm going to tell you what to look for. First make sure that you have the current copy of the page from the server by holding down the shift key (or option key if you are using a Mac) and click the Reload or Refresh button in your browser. To access the source of your page, right click anywhere on the page (except on the spots where the images ought to be) and select 'View Source'. If you have a disable right menu script on your page you will need to select the 'Source' option from the 'View' menu at the top of the browser screen instead.
Next you want to search the source of your page. What you are looking for is a tag that says <img. This identifies the start of the code that should link a particular image into your page. Somewhere after the start of this tag and before the > you should find some code that reads src= what follows that is the address that the browser is to use to find the image. Let's take a look at that address and see if we can work out what the problem is.
- If the address contains C:\ then the problem is that the address is looking for the file on the C: drive of the local computer instead of on the server. You might find this to be the case when you can see the images on the page but none of the visitors to your site can. This is because you have the images on your own computer but the visitors to your site don't. In order for the images to display they need to be loaded to the server and accessed from there.
- If the address starts ../ then the problem is that the address is looking for the images on the server but outside of your site (the ../ tells the browser to start by going to the directory that is the parent of your site directory). As you have no control over what the server contains outside of your site, you certainly wont find your images there. You need to have the images loaded to your site and referenced from there.
- If the address starts http:// then the full address of where the image can be found has been specified rather than an address relative to the page. This probably means that the image is actually being loaded from a different server than the one containing your site. This other server may not allow remote loading (which is what you are trying to do when you access an image on one server from a page on another). If this is the case then there is no way you will get the image to display from its current location. You should take a copy of the image and place it on your site so that you can reference it from there. This will also improve the speed at which your page loads.
- If the address starts with a name followed by a / then the address is looking for the image within a sub-directory with the specified name. For example img/computer.gif is looking for an image called computer.gif in a sub-directory called img. You need to ensure that the specified sub-directory exists and that the image is loaded there in order for it to display, The browser wont find an image in the main directory if it has been told to look in a sub-directory.
- If the address just contains the file name of the image then the browser will be expecting to find the image in the main directory so you need to make sure that the image was loaded there and not into a sub-directory.
If you have checked the address where you are trying to load the image from and you loaded the image there then the next thing to do is to check the actual name of the image. Most internet servers run Linux (or some other UNIX variant) and these operating systems are all case sensitive. If you loaded the image as Computer.gif and the filename in the address is computer.gif then the browser wont find the file because the uppercase C on the front means that the file names are different.
Hopefully, once you have checked all of the above possibilities you will have at least identified the reason why your images aren't displaying. If you have checked all of the above and still can't figure out why your images aren't displaying then fill out our Ask Felgall form identifying the address of the page where the images aren't displaying and I will take a look for you.
So now you have at least identified the cause of the problem. I assume that if you are still reading that you are still wondering what you ought to do in order to fix the problem.
The simplest image links are those which link to images stored in the same directory as your page source. The other alternative is to have a separate image directory that contains your images. What you need to do is to replicate the way that you want things on the server on your computer. If you plan on loading all of the files into the main directory of your site then move all of the image files into the same folder as your page. If you intend to have the images in a sub-directory then go to the folder that contains your page, create a folder within it with the same name as the sub-directory, and move the images there.
At this point the copy of your web page on your computer is probably showing the same broken image links as the copy on the web. To fix things, open the page in your web editor and for each broken image, update the address of the image to point to where you just moved it to. If you can't change the address of the existing image then try deleting it and then add the image again. Once you do this then the image addresses in your page should now point to the right place once you upload it to your web site.
Some of the Microsoft programs that you can use to create web pages store all of the images and other files referenced by a given page in a sub-directory with a name related to the page name for example if you have a page called index.html then the images used by that page will be stored in a sub-directory called index_files. These programs don't give you the choice of where you want to store your images, they just automatically copy the images to the appropriately named sub-directory. If you are using one of these programs then the way to get your images working is to create the appropriately named sub-directory and copy the contents of the folder by that name on you computer into the newly created sub-directory.
