Replace broken images with jQuery or JavaScript

Question

I have a web page that includes 10's of thousands of images. Sometimes the image isn't available so a broken image is displayed in the clients browser.

The broken image is in the following URL format: www.domain.com/t.php?src=p/dd5e5b08_1.jpg.

How do I use jQuery to get the set of images, filter it to broken images then replace the src?

The following does not work:

above the closing </head> tag

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

above the closing tag

<script type="text/javascript">
    $(window).load(function() {
        $("img").each(function(){
            var image = $(this);
            if(image.context.naturalWidth == 0 || image.readyState == 'uninitialized'){
                $(image).unbind("error").attr("src", "/images/no_image.png");
            }
        });
    });
</script>

Vijaya Pandey · Accepted Answer · 2013-04-26 07:03:13Z

2

This code might help you:

function imgError(image){
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

Try CodeFiddle Demo

answered Apr 26, 2013 at 7:03

Vijaya Pandey

4,2705 gold badges35 silver badges58 bronze badges

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

3 Comments

user2110535 Over a year ago

how do you set dynamically <img src="image.png" ?

Vijaya Pandey Over a year ago

get image on php variable and use it like this: <img src="<?php echo $image ?>">

mcont Over a year ago

What is return true for?

Deep Khicher · Accepted Answer · 2019-06-23 13:59:45Z

0

This may help you:

$(document).ready(function () {
    let images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
    let image_html = '';
    $.each(images, (key, value) => {
        image_html += '<img src="img/' + value + '"/>';
    });
    $('#imgcontainer').html(image_html);
    $('img').on('error', function () {
        $(this).replaceWith('<img src="img/no-photo.jpg"/>');
    });
});

answered Jun 23, 2019 at 13:59

Deep Khicher

271 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

Replace broken images with jQuery or JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related