我使用惰性加载，必须这样做，以使它正常工作:

lazyload();

var errorURL = "https://example.com/thisimageexist.png";

$(document).ready(function () {
  $('[data-src]').on("error", function () {
    $(this).attr('src', errorURL);
  });
});

我相信这就是你想要的:jQuery。预加载

下面是演示中的示例代码，你指定加载和未找到的图像，你就全部设置好了:

jQuery('#images img').preload({
  placeholder:'placeholder.jpg',
  notFound:'notfound.jpg'
});

使用JavaScript处理图像的onError事件以重新分配其源:

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

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

或者没有JavaScript函数:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

下面的兼容性表列出了支持错误功能的浏览器:

http://www.quirksmode.org/dom/events/error.html

这是一个快速和肮脏的方法来替换所有破碎的图像，没有必要改变HTML代码;)

codepen例子

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

我在看另一个SO帖子的时候发现了这个帖子。下面是我在那里给出的答案的副本。

我知道这是一个老帖子，但React已经变得流行起来，也许使用React的人会来这里寻找同样问题的答案。

所以，如果你正在使用React，你可以像下面这样做，这是由React团队的Ben Alpert提供的原始答案

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}

我发现这是最好的工作方式，如果任何图像第一次加载失败，它将完全从DOM中删除。执行console.clear()可以保持控制台窗口干净，因为404错误不能被try/catch块忽略。

$('img').one('error', function(err) {
    // console.log(JSON.stringify(err, null, 4))
    $(this).remove()
    console.clear()
})