In firefox a broken image appears as just a blank white space. On a white background there is no way to distinguish between no image and a broken image. This makes identifying broken images difficult to recognise and makes them go uncorrected.
How do I make it so that broken images produce an X like they do in Internet Explorer?
A better solution might be to catch requests for images that return a 404 Not Found Error.
In Firefox you can use Firebug to look at all the HTTP requests being made by your browser. Any missing files will show up as red in the list. To achieve the same in Internet Explorer you could use Microsoft's Fiddler tool.
Even better, grab the Web Developer Toolbar from the Mozilla Add-ons site. Once you get it installed, simply go to Images > Find Broken Images.
All solutions given work well. There is just another situation where images will be broken and a different solution.
You hot-link images. You have no control on the images that will eventually return a 404 and want to display something to the user. That you can prevent with css and with the correct width/height of the image on display.
// html code
<img class="external" src="http://externalserver.com/image.jpeg" width="300" height="200" />
// css
.external {
background: url(path-to-file);
}
And your background file would have a cross or a text saying that the image is not available anymore. Just a thought.
Hope it helps.
I faced problem in FF and missed to check when I was confident that images are included. That does not got detected either due to image not get uploaded to folder or some other reason and FF does not said anything due to empty alt. Here I have posted the solution: http://www.satya-weblog.com/2010/07/display-broken-images-in-firefox.html