如何使用 JavaScript 或 jQuery 替換損壞的映像？

用jQuery/JavaScript 取代損壞的圖像

損壞的圖像會破壞網頁的美觀，給用戶帶來不完整或視覺上不吸引人的體驗。幸運的是，jQuery 和 JavaScript 提供了工具來優雅地處理這個問題。

jQuery 方法

雖然人們最初可能會考慮使用jQuery 來管理損壞的映像，但JavaScript 提供了更簡單的方法，更有效的解決方案。透過處理每個映像的 onError 事件，如果載入失敗，您可以重新指派其來源。

JavaScript 解決方案

下面的JavaScript 程式碼片段擷取了onError 事件一個影像元素，更新其src 屬性以顯示佔位符影像（例如， "noimage. gif")。

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

或者，您可以使用更簡潔的語法，無需單獨的 JavaScript 函數：

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

相容性

下表列出了支援處理損壞錯誤的瀏覽器圖片：

https://www.quirksmode.org/dom/events/error.html

以上是如何使用 JavaScript 或 jQuery 替換損壞的映像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！