How to Display Broken Images in Firefox?

Firefox does not display broken image. If image has alt attribute set then Firefox will display alt text otherwise if will not display anything. IE display cross marked image when image is broken, when image cannot be found at the source. Firefox does it all for making the web page beautiful for net surfer. Visitor cannot fix the broken image and so Firefox display what is available in beautiful way to visitor of the page.

For developer invisible broken image can be problematic. We may not notice broken image in Firefox. If you have Web Developer installed then you can use Images -> Find Broken Image. But it will work if you specially looks for broken image. I have a workaround using Greasemonkey tool. It can display the broken image the way you wish to see. I have written a script for the job.

Check this code in Firefox and IE:

<img src="test.jpg" alt=""><br>
<img src="test.jpg" >

I have written a post about solution to broken images and when that is beyond our control. Check solution to missing images.

JavaScript code for Displaying all Broken Images in Firefox:

function selImg()
{
    var d= document;
    var imgs = d.getElementsByTagName('img');
    for(var i=0; i<imgs.length; i++ )
    {
        if (!imgs[i].complete) { // IE
            imgs[i].style.border = '1px solid red';
        }
        if (typeof imgs[i].naturalWidth != "undefined" && imgs[i].naturalWidth == 0) {  // FF
            imgs[i].style.border = '1px solid red';
            imgs[i].style.backgroundColor = 'red';
            imgs[i].style.color = 'black';
            imgs[i].title = imgs[i].src;
            if (imgs[i].alt == '')
            {
                imgs[i].alt = 'NoImg';
            }
            // whether width=0 or not set the property, imgs[i].width return width=0
            if (typeof imgs[i].width == 'undefined' || imgs[i].width == 0)
            {
                //imgs[i].setAttribute('width', '20px');
                //imgs[i].setAttribute('height', '20px');
                imgs[i].style.width = '20px';
                imgs[i].style.height = '20px';
                // in case of zero dim set, alt is not expanding and dim set is also not working. so in that case this code is required
                imgs[i].src = 'http://localhost/no-image1.png';
            }
        }
    }
    return;
}
function selImgHandler() {
    window.setTimeout(selImg, 1000);
}
if (document.addEventListener) { // FF only
    document.addEventListener("DOMContentLoaded", selImgHandler, false)
}

The code will display the broken images regardless of the alt attributes. It will display the src property value in title so that you know without visiting the source code where it points to. Remember to change the url here:
imgs[i].src = 'http://localhost/no-image1.png';. Use any small image or just put here any online image URL. You can download this image free of cost:
no image, missing image


You may know - How to use Greasemonkey script. First you need to install the Greasemonkey addons. After that click once to enable it. Greasemonkey comes at the right-bottom of the window. When it is enabled, right click to see context menu, click on "New User Scripts…" and you will see this window:

greasemonkey-brokenimage

I have filled the box.  Includes (one per line) is important as this will make your script work for a certain website. Wildcard is accepted. Use like *satya* for any page at satya-weblog.com. You may not want to execute this script on every web page as this will take little bit of resources on your PC. For fun you can run this script for every web page by entering this: *.* on new line.

Comments are open for an year period. Please, write here on Facebook page.