为什么图像元素的 onerror 属性在浏览器中的行为不一致？

使用图像元素的 onerror 属性

在 HTML 中，onerror 属性允许您指定图像失败时要采取的操作加载。然而，据观察，该属性在某些浏览器中并不总是按预期工作。

在提供的示例中，onerror 属性用于更改损坏图像的来源，不同浏览器的行为有所不同。要解决此问题，需要采取修改方法。

下面更新的代码片段解决了 Chrome 和 Mozilla 中的问题，同时保持与 IE 的兼容性：

<code class="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;
}</code>

<code class="html"><div id="image" class="posting-logo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
   class="posting-logo-img"
  />
</div>
<div id="photo" class="posting-photo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
       class="posting-photo-img"
  />
</div></code>

通过取消onerror 处理程序使用 this.onerror=null;在更改图像来源之前，我们可以防止备份 URL 也无效时可能发生的无限循环。

此方法的现场演示可以在以下位置找到：http://jsfiddle.net/oLqfxjoz/

以上是为什么图像元素的 onerror 属性在浏览器中的行为不一致？的详细内容。更多信息请关注PHP中文网其他相关文章！