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

lazyload();

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

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

如果有人像我一样，试图将错误事件附加到动态HTML img标记，我想指出的是，有一个陷阱:

显然，img错误事件不会在大多数浏览器中冒泡，这与标准的说法相反。

所以，像下面这样的代码是行不通的:

$(document).on('error', 'img', function () { ... })

希望这对其他人有所帮助。我希望我能在这个帖子里看到这个。但是，我没有。我把它加起来

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

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

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

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

有时使用错误事件是不可行的，例如，当你试图在一个已经加载的页面上做一些事情时，比如当你通过控制台、bookmarklet或异步加载的脚本运行代码时。在这种情况下，检查img。和img。naturalHeight是0似乎做的把戏。

例如，这里有一个片段，从控制台重新加载所有损坏的图像:

$$("img").forEach(img => {
  if (!img.naturalWidth && !img.naturalHeight) {
    img.src = img.src;
  }
}

你可以使用GitHub自己的fetch:

前端:https://github.com/github/fetch 或者在后端，一个Node.js版本:https://github.com/bitinn/node-fetch

fetch(url)
  .then(function(res) {
    if (res.status == '200') {
      return image;
    } else {
      return placeholder;
    }
  }

编辑:这个方法将取代XHR，据说已经在Chrome。对于将来阅读这篇文章的人来说，您可能不需要包含上述库。