我认为我有一个更优雅的方式与事件委托和事件捕捉窗口的错误，即使备份映像加载失败。

img { width: 100px; height: 100px; } <script> window.addEventListener('error', windowErrorCb, { capture: true }, true) function windowErrorCb(event) { let target = event.target let isImg = target.tagName.toLowerCase() === 'img' if (isImg) { imgErrorCb() return } function imgErrorCb() { let isImgErrorHandled = target.hasAttribute('data-src-error') if (!isImgErrorHandled) { target.setAttribute('data-src-error', 'handled') target.src = 'backup.png' } else { //anything you want to do console.log(target.alt, 'both origin and backup image fail to load!'); } } } </script> <img id="img" src="error1.png" alt="error1"> <img id="img" src="error2.png" alt="error2"> <img id="img" src="https://i.stack.imgur.com/ZXCE2.jpg" alt="avatar">

重点是:

将代码放在头部，并作为第一个内联脚本执行。因此，它将侦听脚本执行后发生的错误。 使用事件捕获来捕获错误，特别是那些没有冒泡的事件。 使用事件委托，避免在每个图像上绑定事件。 在给error img元素一个backup.png文件之后，给它们一个属性，以避免backup.png文件的消失和后续的无限循环，如下所示:

img错误- - - - - - > backup.png - >错误- > backup.png - >错误- >…

jQuery 1.8

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

jQuery 3

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .on("error", function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

参考

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

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

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

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

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

如果图像无法加载(例如，因为它不在提供的URL中)，图像URL将被更改为默认值，

有关.error()的更多信息

美元(img)。On('错误'，函数(e) { (美元)。attr(“src”、“broken.png”); })；

这里有一个独立的解决方案:

$(window).load(function() {
  $('img').each(function() {
    if ( !this.complete
    ||   typeof this.naturalWidth == "undefined"
    ||   this.naturalWidth == 0                  ) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

当OP正在寻找替换SRC时，我相信许多人遇到这个问题可能只希望隐藏损坏的图像，在这种情况下，这个简单的解决方案对我来说非常有用。

使用内联JavaScript:

<img src="img.jpg" onerror="this.style.display='none';"/>

使用外部JavaScript:

var images = document.querySelectorAll('img'); For (var I = 0;I < images.length;我+ +){ 图像[我]。Onerror = function() { this.style.display = '没有'; } } <img src='img.jpg' />

使用现代外部JavaScript:

document.querySelectorAll('img').forEach((img) => { img。Onerror = function() { This.style.display = 'none'; ｝ })； <img src='img.jpg' />

参见浏览器对NodeList的支持。forEach和arrow函数。