WWW FAQs: The images in my page only show up on my own computer. Why?

2008-05-02: "Hi, I have a problem with my website. I created a web server and I was able to access the website remotely, but the page is lacking the images. It will only display text."

Visit any page of your website that suffers from the problem. Now pull down the "View" menu and pick "View Source" or "Page Source," depending on your choice of web browser. The HTML code for your page will be displayed.

Take a look at your img elements. Do they look like this?

<img src="file:///c/Program Files/somewhere/on/my/drive/image.jpg" />

Looks like we've found your problem! The URL you have specified for the src attribute is a location on your personal hard drive. This works for your computer because, well, it's your computer, and your hard drive is hooked up to it.

But is your personal hard drive hooked up to anybody else's computer? Nope, it sure isn't. No wonder it doesn't work!

So what do you need to do? You need to fix your src attributes so that they find the image via the web server, not by directly reading your hard drive.

The simplest solution is this:

1. Put the image files in the same folder with the web pages.

2. Write your img elements like this:

<img src="image.jpg" />

Notice what you don't see here. No http:, no file:, just a filename! And it works!

This works because web browsers support "relative URLs." A relative URL is a URL that locates something relative to the page you are already looking at. So if the image is in the same folder as the page, then all you need is a filename.

The rules for image URLs are exactly the same as the rules for writing links. So you can also use this technique when writing a elements that link to other pages.

With a little more effort, you can still use relative URLs for images in different folders. For more information about URLs and how to construct them effectively, see my article how do I link to another web page or file?

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!