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...

There is an answer already here: http://stackoverflow.com/a/92819/4813913 — m4n0, May 03 '15 at 08:58
http://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript, http://stackoverflow.com/questions/5678899/change-image-source-if-file-exists, http://stackoverflow.com/questions/14651348/checking-if-image-does-exists-using-javascript — dekkard, May 03 '15 at 08:59
possible duplicate of [jQuery/Javascript to replace broken images](http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images) — iYoung, May 03 '15 at 09:04
I tried those code ,but it replace all the image not those not exists.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]); } — leizh00701, May 03 '15 at 09:34

score 11 · Answer 1 · edited May 23 '17 at 12:19

11

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

edited May 23 '17 at 12:19

Community

1
1

answered May 03 '15 at 09:41

StudioTime

22,603
38
120
207

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 – leizh00701 May 03 '15 at 09:45
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 – StudioTime May 03 '15 at 09:46
This is easy solution , but if `error-img.jpg` does not exist, this causes an infinite loop, check [this](http://stackoverflow.com/a/980948/2218697) answer. – Shaiju T Sep 19 '16 at 15:46
The link of originally posted has the best solution which is by CSS only. No need for any JS. – iniravpatel Jul 25 '17 at 11:31

score 2 · Accepted Answer · edited Jul 28 '16 at 01:15

2

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;
}

edited Jul 28 '16 at 01:15

Angel Politis

10,955
14
48
66

answered May 03 '15 at 09:58

leizh00701

1,893
5
21
32

score 0 · Answer 3 · answered May 03 '15 at 08:58

0

You can bind onerror event listener to all the images in the DOM..

answered May 03 '15 at 08:58

Rayon

36,219
4
49
76

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

3 Answers3