Check whether an image exists, if not set a default image using Javascript

Question

I have a lot of images. like:

<img src="src1"/>
<img src="src2"/>
<img src="src3"/>

Some of the image maybe do not exist. So the browser will show a broken image picture. It is ugly. How to use Javascript not jQuery to determine whether an image exists? If not, give a local image to replace it. Thank you.

I tried the code , it replaced all the images not only those not exist.

function imgError(image) {
            image.onerror = "";
            image.src = "http://www.hi-pda.com/forum/uc_server/data/avatar/000/85/69/99_avatar_middle.jpg?random=10.20420048222877085";
            return true;
        }

        var imgs = document.getElementsByTagName("img");
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onerror=imgError(imgs[i]);
        }

the images are

<img src="rrrrr"  />
    <img src="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"/>

the first picture does not exist , the second one exists. when I run it in chrome , all the picture were replaced...

Solution 1

I solved it using this code:

function nofind() {
    var img = event.srcElement
    img.src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/default.gif";
    img.onerror = null; 
}

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onError=nofind;
}

Solution 2

Simple solution:

<img src="http://src1/img.jpg" onerror="this.src='http://src1/error-img.jpg';">

Set within the img tag

Update

A better solution which stops infinite loops - thanks @stom

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

Originally posted by @svend here

Comments

[leizh00701]

Yes ,But I want to use it to all the images, you can look the problem again , I tried the method in others problems , it replaced all the image not only those do not exist

[StudioTime]

Simply add onerror="this.src='http://src1/error-img.jpg';" to all your image tags, then any which fail will show your error default image

[Shaiju T]

This is easy solution , but if error-img.jpg does not exist, this causes an infinite loop, check this answer.

[iniravpatel]

The link of originally posted has the best solution which is by CSS only. No need for any JS.