我有一个网页,里面有很多图片。有时映像不可用,因此在客户机的浏览器中显示一个损坏的映像。

我如何使用jQuery来获取图像集,过滤它到破碎的图像,然后替换src?


—我本以为用jQuery会更容易做到这一点,但事实证明使用纯JavaScript解决方案更容易,也就是Prestaul提供的解决方案。


当前回答

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

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

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

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

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

其他回答

如果你已经用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的脚本在注入时不会运行,所以必须显式。

对于React开发者:

<img 
    src={"https://urlto/yourimage.png"} // <--- If this image src fail to load, onError function will be called, where you can add placeholder image or any image you want to load
    width={200} 
    alt={"Image"} 
    onError={(event) => {
       event.target.onerror = "";
       event.target.src = "anyplaceholderimageUrlorPath"
       return true;
    }}
 />

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

$(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';
    }
  });
});

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

有关.error()的更多信息

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

我在看另一个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} />;
    );
}