如何使用 JavaScript、jQuery 或 CSS 隱藏損壞的圖片圖示？

使用JavaScript/jQuery/CSS 靜默隱藏「找不到影像」圖示

當渲染的HTML 頁面中缺少圖片時，預設值「找不到圖像」圖示可能會分散使用者的注意力並破壞使用者體驗。幸運的是，有多種方法可以使用各種技術來隱藏此圖示。

JavaScript/jQuery

最簡單的方法涉及使用 onerror 事件處理程序。當映像載入失敗時，會觸發 onerror 事件，讓您執行自訂操作。其中一個操作是隱藏圖像：

<img  src="/static/imghwm/default1.png" data-src="path/to/image.png" class="lazy" onerror="this.style.display = 'none';" alt="如何使用 JavaScript、jQuery 或 CSS 隱藏損壞的圖片圖示？" >

CSS

CSS 透過為無法載入的圖像定義特定樣式，提供了更直接的方法。使用display 屬性，您可以將影像的可見性設定為隱藏：

img.hide-if-failed {
    display: none;
}

然後，將此類指派給影像：

<img  class="hide-if-failed lazy" src="/static/imghwm/default1.png" data-src="path/to/image.png" alt="如何使用 JavaScript、jQuery 或 CSS 隱藏損壞的圖片圖示？" >

使用JavaScript/jQuery隱藏其他元素

如果「找不到圖像」圖示包含在另一個元素（例如div）中，您可以使用JavaScript 或jQuery 在映像載入失敗時隱藏父元素：

$('img').on('error', function() {
  $(this).parent().hide();
});

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