如何隱藏影像破碎圖示只使用 CSS/HTML(不帶 js)

問題描述

如何隱藏破碎的影像圖示？例：

我有一個錯誤 src 的影像：

<img src="Error.src"/>

該解決方案必須適用於所有瀏覽器。

只使用 CSS 或 HTML，而不是 JS 。

最佳解決方案

CSS /HTML 無法知道影像是否斷開連結，所以您將不得不使用 JavaScript

但是這裡是隱藏影像或用備份替換源的最小方法。

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

要麼

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

Update

您可以透過執行以下操作一次將此邏輯應用於多個影像：



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

更新 2

對於 CSS 選項，請參閱下面的 michalzuber’s answer 。您無法隱藏整個影像，但您可以更改破損圖示的外觀。

次佳解決方案

儘管人們在說這裡，你根本不需要 JavaScript，甚至不需要 CSS！

它實際上是非常可行和簡單的僅 HTML 。如果影像未載入，您甚至可以顯示預設影像。就是這樣…

這也適用於所有瀏覽器，甚至遠遠超過 IE8(在 2015 年 9 月份託管的網站的 25 萬以上的訪問者中，ZERO 人使用的東西比 IE8 差，意味著此解決方案適用於所有內容) 。

步驟 1：將影像引用為物件而不是 img 。當物件失敗時，它們不會顯示破損的圖示; 他們什麼都不做。從 IE8 開始，可以互換使用 Object 和 Img 標籤。你可以調整大小並做所有光榮的東西，你可以與常規的影像。不要怕物件標籤; 它只是一個標籤，沒有什麼大和笨重的載入，它不會減慢任何東西。您只需使用另一個名稱的 img 標籤。速度測試顯示它們的使用相同。

步驟 2 :(可選，但很棒) 在該物件內貼上預設影像。如果要在物件中實際載入的影像，則預設影像將不顯示。所以例如，您可以顯示一個使用者頭像的列表，如果有人在伺服器上沒有影像，它可以顯示佔位符影像… 根本不需要 JavaScript 或 CSS，但是您獲得了什麼的功能需要大多數人的 JavaScript 。

這是程式碼…

<object data="avatar.jpg" type="image/jpg">
    <img src="default.jpg" />
</object>

是的，很簡單

如果你想用 CSS 實現預設影像，你可以使它更簡單的 HTML 像這樣…

<object class="avatar" data="user21.jpg" type="image/jpg"></object>

… 而且只需從這個答案中新增 CSS – > https://stackoverflow.com/a/32928240/3196360

第三種解決方案

在 https://bitsofco.de/styling-broken-images/找到了一個很好的解決方案



img {
  position: relative;
}

/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;
  text-align: center;
  content: attr(alt);
}
<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

第四種方案

僅使用 CSS 很困難，但您可以使用 CSS 的 background-image 而不是<img> 標籤…

這樣的事情

HTML

<div id="image"></div>

CSS

#image {
    background-image: url(Error.src);
    width: //width of image;
    height: //height of image;

}

這是一個工作小提琴：http://jsfiddle.net/xbK6g/

注意：我在框中的 CSS 中新增了邊框，以顯示影像的位置。

第五種方案

我喜歡 Nick 的 answer，並且正在玩這個解決方案。找到一個更乾淨的方法。因為:: before /:: 之後的 pseudoos 不能在替換元素 (如 img 和 object) 上工作，所以它們只有在沒有載入物件資料 (src) 的情況下才會工作。它保持 HTML 更乾淨，只有在物件無法載入時才新增偽。

http://codepen.io/anon/pen/xwqJKQ

<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>

<object data="http://broken.img/url" type="image/png"></object>

object {
  position: relative;
  float: left;
  display: block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border: 1px solid black;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: red url('http://placehold.it/200x200');
  }
}

第六種方案

我認為最簡單的方法是隱藏 text-indent 屬性破損的影像圖示。

img {
    text-indent: -10000px
}

如果您想要檢視”alt” 屬性，那麼它是不行的。

第七種方案

如果您仍然需要使影像容器可見，因為它稍後會被填寫，並且不想打擾顯示和隱藏它，您可以在 src 中貼上 1×1 透明影像：

<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

我用這個確切的目的。我有一個影像容器，它將透過 Ajax 載入影像。因為影像很大，需要載入，所以需要在 Gif 載入欄的 CSS 中設定一個 background-image 。

然而，因為 src 是空的，故障影像圖示仍然出現在使用它的瀏覽器中。

設定透明 1×1 Gif 可以簡單有效地修復此問題，無需透過 CSS 或 JavaScript 新增程式碼。

參考文獻

How to hide image broken Icon using only CSS/HTML (without js)

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何隱藏影像破碎圖示只使用 CSS/HTML(不帶 js)