If you’re a keen web-developer and tend to do a lot of testing in Firefox, you will have probably come across the problem of not noticing broken images, as Firefox will not render anything if the image cannot be found.
The one thing I certainly miss from Internet Explorer since migrating to Firefox was the broken image placeholder, or the big red cross. The only reason I personally still use Internet Explorer is purely for testing purposes, to ensure the Doxmart experience is just as good and usable in every common web browser.
To enable this feature in Firefox, the most commonly suggested method seems to be to visit ‘about:config’ in Firefox, and ensure that ‘browser.display.show_image_placeholders’ is set to ‘true’, but in my case this was already enabled and still not showing placeholders.
In order to get these working in my particular environment (Windows Server 2008, Firefox 3.5), i had to navigate to ‘%appdata%\Mozilla\Firefox\Profiles\<username>\chrome’, or, if you’re on a domain, it may be found in ‘%appdata%\Roaming\Mozilla\Firefox\Profiles\<username>\chrome’. In this directory, you should find a file entitled ‘UserContent-example.css’. Rename this file to ‘UserContent.css’ and add the following CSS rule:
/* * Show image placeholders */ @-moz-document url-prefix(http), url-prefix(file) { img:-moz-broken{ -moz-force-broken-image-icon:1; width:24px; height:24px; } }
Save this file, and restart Firefox. Any broken images should now show a broken image placeholder, which will enable you to easily identify missing or broken images during development.
There are also several other tweaks for Firefox that can be implemented using CSS, see this article from Mozilla for more information: Customizing Mozilla
Tags: Broken image, Firefox, Image placeholder, missing image, show image placeholder
You are my hero! Thank you, this is a very simple and elegant solution. I had been looking for a plugin/add-on to do this, but surprisingly couldn’t find any. (Even though certainly lots of people requesting this, just no real working solutions for me until I found your post!)
Thanks again!
thanks for this great solution, I also added a variation to make it work for input fields being used as images (.net websites use this method sometimes)
input:-moz-broken{
-moz-force-broken-image-icon:1;
width:24px;
height:24px;
}
Thanks guy!! Useful!
Finally found a solution!
Thanks, man!
Super-Duper site! I am loving it!! Will come back again – taking your feeds too now, Thanks.
Thanks. This is useful for not just developers, as sometimes one can run across a site that has image links instead of text links, and when the image can’t be found, then one cannot visit that link.
Finally i found a solution for this very annoying problem.
thanx man
It has caught me out several times too! Quite frustrating.
Thanks! That was making me look incompetent! I wasn’t making mistakes like that since the days of Netscape 2.0