我不确定是否有更好的方法，但我可以想到一个hack来获得它-你可以Ajax post到img URL，并解析响应，看看图像是否真的回来了。如果返回404或其他错误，则更换img。不过我估计过程会很缓慢。

我也有同样的问题。这个代码在我的案子上很有效。

// Replace broken images by a default img
$('img').each(function(){
    if($(this).attr('src') === ''){
      this.src = '/default_feature_image.png';
    }
});

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

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

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

我不确定是否有更好的方法，但我可以想到一个hack来获得它-你可以Ajax post到img URL，并解析响应，看看图像是否真的回来了。如果返回404或其他错误，则更换img。不过我估计过程会很缓慢。

使用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包装的HTML5 Image对象的示例。为主图像URL调用load函数，如果加载导致错误，则用备份URL替换图像的src属性。

function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) {
    var $img = $('#' + imgId);
    $(new Image()).load().error(function() {
        $img.attr('src', backupUrl);
    }).attr('src', primaryUrl)
}

<img id="myImage" src="primary-image-url"/>
<script>
    loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url');
</script>