7

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?

reach4thelasers
  • 26,181
  • 22
  • 92
  • 123

7 Answers7

19

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;
  }
}
gavtaylor
  • 653
  • 8
  • 21
  • This is the answer! Now I can find the broken images. Thank you! – Alexandre L Telles Mar 31 '11 at 12:12
  • 1
    I created a "UserContent.css" file in my profile folder, but that didn't work. I found out that I needed to create a "chrome" folder in my profile folder and put the "UserContent.css" file in there. After that, it worked. – Adam Taylor Oct 20 '16 at 14:39
  • 1
    is there a way to still show the alt-text next to the broken icon though? – endolith Dec 07 '16 at 19:47
4

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)

Minkul
  • 41
  • 1
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.

coreyward
  • 77,547
  • 20
  • 137
  • 166
  • 1
    I already have Web developer toolbar, and this works, but I was looking for a solution that makes it obvious that images are broken rather than having to explicitly choose a menu option. I want broken images to be highlighted to me, rather than me having to request something. – reach4thelasers Nov 08 '09 at 21:55
2

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.

Frankie
  • 24,627
  • 10
  • 79
  • 121
  • Firefox ignores width and height if the image is broken - it will display the text in the Alt tag instead. – George Filippakos May 18 '12 at 13:53
  • @user961333 true... on FF you have to use `-moz-force-broken-image-icon: 1`. You can do it site-wide or for specific images. Updated answer accordingly. Thks. – Frankie May 18 '12 at 14:57
0

this add-on detects unavailable images by scanning the currently visited website and all its embedded stylesheets:

https://addons.mozilla.org/de/firefox/addon/broken-image-finder/

dupps
  • 1
0

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.

Andy Hume
  • 40,474
  • 10
  • 47
  • 58
0

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

Satya Prakash
  • 3,372
  • 3
  • 31
  • 47