Firefox show broken images

Question

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?

Answer 1

I know this question was asked a while ago but I wrote a blog post on this issue a while back and thought it might be worth adding a link in case anyone falls across it.

Edit 09/12/2013:

KatieK made a good point below about adding the information directly in the answer, here are the required steps to get this working, still relevant in the latest nightly build as of Dec 2013 (v28a2)

1) type about:config into your address bar and accept the warning

2) search for browser.display.show_image_placeholders and set to true

3) search your Fx profile folder for UserContent-example.css and rename it to UserContent.css (if the example file doesnt exists you can just create it)

4) add the following css to your UserContent.css and restart Firefox

/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken{
    -moz-force-broken-image-icon:1;
    width:24px;
    height:24px;
  }
}

Answer 2

The best solution to show broken image icon in Firefox - install Greasemonkey (https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/) and install Broken Image Icon Script (http://userscripts.org/scripts/show/104265)

Answer 3

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.

Answer 4

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);
    -moz-force-broken-image-icon: 1; /* to make FF show the image */
}

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.