Where to swap image if broken

Question

I use lots of images on a page which are loaded into DOM eg

html += '<img src="'+image.preview+'" title="View larger image" alt="'+image.item_title+'" height="'+image.display_height+'" width="'+image.display_width+'">';

The data comes from an ajax call and is in a FOR loop, one for each image. I have two images refs in case one is broken image.preview and image.preview2 (I use two as image.preview is local but in case of error then image.preview2 is original image)

If image.preview is broken I want to switch to image.preview2

I'm trying the following but not sure where to place it?

$('img').on('error', function() { this.src = image.preview2; });

I've tried before the html +=, after, in the middle of but nothing seems to work - any ideas?

Read the comment directly above you. – Andy Ray Feb 22 '13 at 10:00 — Andy Ray, Feb 22 '13 at 10:00

Sven van Zoelen · Answer 1 · 2013-02-22T09:02:13.213

1

If the preview2 image source is for every image different, then I suggest doing it within the for loop like this:

for(n in images) {
    var image = images[n];

    // create jQuery object (is not in the DOM jet)
    $img = $('<img title="View larger image" alt="' + image.item_title + '" height="' + image.display_height + '" width="' + image.display_width + '">');

    // is there an preview src?
    if(typeof image.preview == 'Undefined' || image.preview == '') { //nopes
        $img.attr('src', image.preview2);
    } else { //yes
        $img.attr('src', image.preview);
    }

    // add the image to the DOM
    $('#id_of_element').append($img);
}

edited Feb 22 '13 at 09:02

answered Feb 22 '13 at 08:51

Sven van Zoelen

6,989
5
37
48

1

Much better solution, I endorse this :) – Timmetje Feb 22 '13 at 09:16
This is checking if the url reference exists to the image as opposed to if the image is actually there though, correct? Or am I reading it wrongly? – StudioTime Feb 22 '13 at 09:24
It checks if the `preview` property of the image is set. So it will not check if the image exists. – Sven van Zoelen Feb 22 '13 at 09:29

score 0 · Answer 2 · answered Feb 22 '13 at 08:50

you can do:

var newImg = $('<img src="'+image.preview+'" title="View larger image" alt="'+image.item_title+'" height="'+image.display_height+'" width="'+image.display_width+'">');
newImg.on('error', function() { this.src = image.preview2; }); 

and then

<the html container>.append(newImg);

this will make sure your image has all settings before it is added to the dom and fetched.

sasi · Answer 3 · 2013-02-22T09:00:51.740

0

example:

function setDefaultImage(img)
{
  img.src = "images/candidates/human.jpg";
}

hope this will help you..

in your scenario..

html += '<img src="'+image.preview+'" title="View larger image" alt="'+image.item_title+'" height="'+image.display_height+'" width="'+image.display_width+'" onerror="'setDefaultImage(this)'">';

 function setDefaultImage(img)
    {
      img.src = "image.preview2";
    }

edited Feb 22 '13 at 09:00

answered Feb 22 '13 at 08:51

sasi

4,192
4
28
47

This is close but I get the error NetworkError: 404 Not Found - http://myurl.com/pages/image.preview2 - its not bringing in the reference properly – StudioTime Feb 22 '13 at 09:19
may be went wrong with the path.. – sasi Feb 22 '13 at 09:39

StudioTime · Accepted Answer · 2013-02-22T11:27:56.210

-2

Figured out the easiest wasy to do it is inline:

html += '<img src....onerror="this.onerror=null;this.src=\''+image.preview2+'\';">';

edited Feb 22 '13 at 11:27

answered Feb 22 '13 at 10:45

StudioTime

22,603
38
120
207

Where to swap image if broken

4 Answers4