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

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

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

如果你已经用innerHTML插入了img，比如:$("div")。innerHTML = <img src="wrong-uri">，你可以加载另一个图像，如果它失败了，例如:

<script>
    function imgError(img) {
        img.error="";
        img.src="valid-uri";
    }
</script>

<img src="wrong-uri" onerror="javascript:imgError(this)">

为什么javascript: _needed?因为通过innerHTML中的脚本标记注入DOM的脚本在注入时不会运行，所以必须显式。

你可以使用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。对于将来阅读这篇文章的人来说，您可能不需要包含上述库。

这是JavaScript，应该是跨浏览器兼容的，并且没有丑陋的标记onerror="":

var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    validateImage = function( domImg ) {
        oImg = new Image();
        oImg.onerror = function() {
            domImg.src = sPathToDefaultImg;
        };
        oImg.src = domImg.src;
    },
    aImg = document.getElementsByTagName( 'IMG' ),
    i = aImg.length;

while ( i-- ) {
    validateImage( aImg[i] );
}

CODEPEN:

(window.jQuery || window.Zepto).fn.fallback = function (fallback) {
  return this.one('error', function () {
    var self = this;
    this.src = (fallback || 'http://lorempixel.com/$width/$height').replace(
      /\$(\w+)/g, function (m, t) { return self[t] || ''; }
    );
  });
};
    

你可以传递一个占位符路径，并通过$*访问失败图像对象的所有属性:

$('img').fallback('http://dummyimage.com/$widthx$height&text=$src');

http://jsfiddle.net/ARTsinn/Cu4Zn/

多年来，这一直困扰着我。我的CSS修复在img上设置了一个背景图像。当动态图像src没有加载到前景时，img的bg上有一个占位符。如果你的图片有一个默认大小(例如高度，最小高度，宽度和/或最小宽度)，这是有效的。

你会看到破碎的图像图标，但这是一种改进。成功测试到IE9。iOS、Safari和Chrome甚至都不会显示坏掉的图标。

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

添加一个小动画，让src在没有背景闪烁的情况下加载。Chrome浏览器在后台可以平滑淡出，但桌面版Safari浏览器却不能。

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  animation: fadein 1s;                     
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

.dynamicContainer img { background: url('https://picsum.photos/id/237/200'); background-size: contain; animation: fadein 1s; } @keyframes fadein { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } img { /* must define dimensions */ width: 200px; height: 200px; min-width: 200px; min-height: 200px; /* hides broken text */ color: transparent; /* optional css below here */ display: block; border: .2em solid black; border-radius: 1em; margin: 1em; } <div class="dynamicContainer"> <img src="https://picsum.photos/200" alt="Found image" /> <img src="https://picsumx.photos/200" alt="Not found image" /> </div>