jQuery / JavaScript替换损坏的图像

有时，使用error事件是不可行的，例如，因为您试图在已加载的页面上执行某项操作，例如，通过控制台，书签或异步加载的脚本运行代码时。在这种情况下，检查img.naturalWidthand img.naturalHeight为0似乎可以解决问题。

例如，以下代码片段可从控制台重新加载所有损坏的图像：

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

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" );

参考

我不确定是否有更好的方法，但是我可以考虑采用这种方法-您可以将Ajax发布到img URL，然后解析响应以查看图像是否真的回来了。如果它以404或类似的形式返回，则换掉img。虽然我希望这会很慢。

我在查看其他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} />;
    );
}

如果您插入了imgwith innerHTML，例如：$("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: _需要？由于通过脚本标记插入到DOM中的脚本在innerHTML注入时未运行，因此必须明确。

CoffeeScript变体：

我解决了Turbolinks的一个问题，该问题有时会导致Firefox中出现.error（）方法，即使该图像确实存在。

$("img").error ->
  e = $(@).get 0
  $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)

更好地使用

jQuery(window).load(function(){
    $.imgReload();
});

因为使用document.ready不一定意味着图像已加载，所以仅HTML。因此，不需要延迟的呼叫。

这是一项cr脚的技术，但是可以保证：

<img ...  onerror="this.parentNode.removeChild(this);">

我使用内置error处理程序：

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

编辑：该error()方法在jquery 1.8及更高版本中已弃用。相反，您应该.on("error")改用：

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});