Image Not Available : Easy Solution for Missing Images

What to do if image is not available in the source you are reading dynamically. Firefox will not show anything (if alt text not available) and IE will show bad looking cross image.

I was working on a page where some data was coming from outside and based on that we were including images. Sometime it happen that they send some data expecting we had image in our database. In that case, I have applied the solution discussed here.

Dynamic source can be xml file or from anywhere else. Even when source is not an external source it may happen that image is not available. In these case, you can do something better than just showing alt text or not doing anything.

Img element has onError event and this event is suitable in our case. We can check if image is available or not. if image is not available then using onError event, we can show alternate image. Alternate image can be No-Image image.

no image image

Now, it is clear that intended image is not available and we know it so showing this image. So, everything is under control. In e-commerce site this can be very useful feature.

<img src="<a href="http://www.satya-weblog.com/">http://www.satya-weblog.com/</a>image.png" height="100px" width="100px" onerror="this.src = '/image/item-no-image.png'" />

Now, when the image is available then that image will be shown otherwise the image mentioned in onerror will be shown. When you deals with lots of images and if those are dynamic then missing images problem can occur.

A function can also be attached to onError event. So, when an error will occur that function will be fired and the function can include an image dynamically for the missing image.

<img src="http://www.satya-weblog.com/image.png" height="100px" width="100px" onerror="handleMissingImg(this);" />
Sample function:


function handleMissingImg(ele)
{
     ele.src = '/image/item-no-image.png';
}

The above code is enough to show your customer that everything is under control and you know the problem of image not available. Based on the HTML onerror event, JavaScript can be used to tie the event if HTML is not under your control. On my Google search, I have found this code by talideon very good:

function IsImageOk(img) {
 // During the onload event, IE correctly identifies any images that
 // weren't downloaded as not complete. Others should too. Gecko-based
 // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }
 // However, they do have two very useful properties: naturalWidth and
 // naturalHeight. These give the true size of the image. If it failed
 // to load, either of these should be zero.
   if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
       return false;
   }
    // No other way of checking: assume it's ok.
    return true;
}

For full implementation of the above code visit talideon.com and Google for more research on Image not available solution.

  • # 1 - by Sandeep

    Nice tip Satya. But, when I have thousands of images with totally different dimensions, what do I do ? Specially, when I have few with high widths and other with long heights??

  • # 2 - by Sandeep

    Nice tip Satya. But, when I have thousands of images with totally different dimensions, what do I do ? Specially, when I have few with high widths and other with long heights??

  • # 3 - by Satya Prakash

    Sorry! I cannot say. it will depend on situation. Generally one image should be enough for all

  • # 4 - by Satya Prakash

    Sorry! I cannot say. it will depend on situation. Generally one image should be enough for all

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