如何使用 img 元素的 onerror 属性

CSS:

.posting-logo-div {
}
.posting-logo-img {
  height: 120px;
  width: 120px;
}
.posting-photo-div {
  height: 5px;
  width: 5px;
  position: relative;
  top: -140px;
  left: 648px;
}
.posting-photo-img {
  height: 240px;
  width: 240px;
}

HTML:

<div id="image" class="posting-logo-div">
  <img
    src="../images/some-logo1.jpg"
    onerror="this.src='../images/no-logo-120.jpg';"
    class="posting-logo-img"
  />
</div>
<div id="photo" class="posting-photo-div">
  <img
    src="../images/some-logo2.jpg"
    onerror="this.src='../images/no-logo-240.jpg';"
    class="posting-photo-img"
  />
</div>

这似乎在 Chrome 或 Mozilla 中不起作用，但在 IE 中起作用。

这有效：

<img src="invalid_link"
     onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
>

现场演示： http://jsfiddle.net/oLqfxjoz/

正如 Nikola 在下面的评论中指出的那样，如果备份 URL 也无效，某些浏览器将再次触发“错误”事件，从而导致无限循环。我们可以通过简单地取消“错误”处理程序来防止这种情况this.onerror=null;.