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: stackoverflow.com/a/92819/4813913 — m4n0
– m4n0, Commented May 3, 2015 at 8:58
stackoverflow.com/questions/18837735/…, stackoverflow.com/questions/5678899/…, stackoverflow.com/questions/14651348/… — unconditional
– unconditional, Commented May 3, 2015 at 8:59
possible duplicate of jQuery/Javascript to replace broken images — iYoung
– iYoung, Commented May 3, 2015 at 9:04
I tried those code ,but it replace all the image not those not exists.function imgError(image) { image.onerror = ""; image.src = "hi-pda.com/forum/uc_server/data/avatar/000/85/69/…"; return true; }  var imgs = document.getElementsByTagName("img"); for (var i = 0; i < imgs.length; i++) { imgs[i].onerror=imgError(imgs[i]); } — leizh00701
– leizh00701, Commented May 3, 2015 at 9:34

Community · Accepted Answer · 2017-05-23 12:19:23Z

12

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, 2017 at 12:19

CommunityBot

11 silver badge

answered May 3, 2015 at 9:41

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

leizh00701 Over a year ago

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 Over a year ago

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 Over a year ago

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

iniravpatel Over a year ago

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

Angel Politis · Accepted Answer · 2016-07-28 01:15:23Z

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, 2016 at 1:15

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

answered May 3, 2015 at 9:58

leizh00701

1,9635 gold badges22 silver badges32 bronze badges

Comments

Rayon · Accepted Answer · 2015-05-03 08:58:55Z

0

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

answered May 3, 2015 at 8:58

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related