為什麼圖像元素的 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中文網其他相關文章！