如何使用 CSS 和 HTML 隱藏或替換損壞的圖片？

使用CSS/HTML 隱藏損壞的圖像佔位符

儘管CSS 和HTML 在檢測損壞的圖像連結方面存在局限性，但仍有最少的解決方法隱藏或管理此類實例。

隱藏破損影像

要隱藏損壞的影像佔位符，您可以使用 中的 onerror 屬性。 tag:

<img src="Error.src" onerror="this.style.display='none'" />

使用此屬性，當圖片載入失敗時，其顯示將被隱藏。

用備份圖片替換

或者，您可以指定後備圖像以防連結損壞：

<img src="Error.src" onerror="this.src='fallback-img.jpg'" />

當圖像載入失敗，來源將切換到指定的後備影像。

注意：雖然 CSS 和 HTML 單獨無法區分損壞的圖像和有效的圖像，但 onerror 屬性可能很有用用於處理這兩種情況下損壞的圖像佔位符。

其他選項

用於管理多個JavaScript 提供了更強大的解決方案。您可以將事件偵聽器附加到DOM，並對頁面上的所有圖像應用相同的邏輯：

document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelectorAll('img').forEach(function(img){
      img.onerror = function(){this.style.display='none';};
   })
});

此腳本將在DOM 完全加載後將display: none 樣式應用於所有損壞的圖像。

以上是如何使用 CSS 和 HTML 隱藏或替換損壞的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！