Whenever I have a problem with an image “not showing up” on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning that it doesn’t start with http://), I pay extra close attention to the relationship of where the file is that is referencing the image, and where that image actually is.
- Is the image in the same directory as the file referencing it?
- Is the image in a directory below?
- Is the image in a directory above?
By “below” and “above”, I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:
Here is all you need to know about relative file paths:
- Starting with “/” returns to the root directory and starts there
- Starting with “../” moves one directory backwards and starts there
- Starting with “../../” moves two directories backwards and starts there (and so on…)
- To move forward, just start with the first subdirectory and keep moving forward
This is a good reminder post for people. As a lazy programmer, I always put images in the “grapics” folder at the root level and use absolute (“/”) paths. Much easier for me.
thanks. ı prefer to keep css file on root, yeah im a lazy boy too :)
There’s also a weird truth about linking to filter and behavior files in Internet Explorer. Every file has to be linked as though it was referred from HTML file. It may sound crazy, but consider this:
example-ie6.css:
body {
filter: (…)AlphaImageLoader(src="images/body-bg.png", sizingMethod="scale");
}
This won’t work if you have HTML files elsewhere. In your case you should write:
body {
filter: (…)AlphaImageLoader(src="assets/CSS/images/body-bg.png", sizingMethod="scale");
}
If you don’t know how to construct unique path, use
/assets/CSS/images/body-bg.png
, where/
means root of your server.These gimmicks are necessary only in IE, only for
filter
andbehavior
(plus references inexpression()
). It’s helpful to remember it next time we want to emulate semitransparent logo in your site. :)PS: Great blog, keep it up. But it would be very helpful if you made a difference between code and pre. My comment will be much nicer to read when you do that. Thanks.
Nice, thanks!
“//website.com/images/image.gif” uses the protocol of a current page. This works fine if you are using absolute paths, so your path could be “http://website.com/images/image.gif”, “https://website.com/images/image.gif” or something else.
and one more “./” uses the current directory.
I am probably the laziest coder by usually putting all the images in the same folder as the html files, I now use a graphics folder.
slightly off topic but if this tip does not work and the images are still not showing up, it can be that they are not saved right in photoshop and are ‘Index format’.
Good article, I alwasy get caught with this :D
Thank you for your idea, but i prefer my css-folder as root, too.
Ralph
Great reminder. Sometimes we do so much, when there’s a problem, we tend to think it has to do with something more in-depth and less complicated then the mere file path.
Great reminder, thanks Chris!
Oh my! The simplest of issues are always the biggest problems … Thank you for this post!
In paths article, says privative rather than primative. Figgered you’d wanna know.
Thanks! Fixed.