用 jQuery 或 JavaScript 替换损坏的图像答案

【问题标题】：Replace broken images with jQuery or JavaScript用 jQuery 或 JavaScript 替换损坏的图像
【发布时间】：2013-04-20 06:40:24
【问题描述】：

我有一个包含成千上万张图片的网页。有时图像不可用，因此客户端浏览器中会显示损坏的图像。

损坏的图像采用以下 URL 格式：www.domain.com/t.php?src=p/dd5e5b08_1.jpg。

如何使用 jQuery 获取图像集，将其过滤为损坏的图像，然后替换 src？

以下不起作用：

在结束 </head> 标签上方

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

结束标记上方

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

【问题讨论】：

标签： php javascript jquery replace

【解决方案1】：

此代码可能对您有所帮助：

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

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

试试CodeFiddle Demo

【讨论】：

如何动态设置
在 php 变量上获取图像并像这样使用它：">
return true 是干什么用的？

【解决方案2】：

这可能对您有所帮助：

$(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"/>');
    });
});

【讨论】：