美化載入失敗的圖片

王浩發表於2016-05-13

載入失敗的圖片會很難看。

但事實上並不總是一定要這樣。我們可以用 CSS 在 <img> 標籤上應用樣式，來提供比預設情況更好的體驗。

兩個關於 <img> 元素的真相

為了搞懂怎麼樣才能美化載入失敗的圖片，我們需要先了解關於 <img> 元素的兩種表現方式。

1. 我們可以在 <img> 元素上應用常規排版相關的樣式。如果圖片的備選文字顯示的話，這些樣式會在其上生效，並且不會影響正常載入的圖片。

2. <img> 元素是替換元素。這是一種“外觀和大小都由外部資源來決定的元素”(Sitepoint)。因為這個元素是由外部資源所控制，所以 :before 和 :after 偽元素一般不會跟它一起生效。但是，當圖片損壞或者沒有載入時，這些偽元素就會顯示出來。

基於以上這兩點，我們能夠在 <img> 元素上應用只有當圖片載入失敗候會顯示的樣式，正常載入的圖片並不會受到影響。

上手練習

利用這一資訊，這裡有幾個美化載入失敗圖片的例子。需要用到下面這個損壞的連結。

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

1	<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

新增有用的資訊

處理載入失敗圖片的一種方法，就是給使用者提示資訊來說明圖片載入失敗了。我們甚至可以使用 attr() 這一語句來顯示圖片的連結地址。

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

img {

font-family: 'Helvetica';

font-weight: 300;

line-height: 2;

text-align: center;

width: 100%;

height: auto;

display: block;

position: relative;

}

img:before {

content: "We're sorry, the image below is broken :(";

display: block;

margin-bottom: 10px;

}

img:after {

content: "(url: " attr(src) ")";

display: block;

font-size: 12px;

}

替換預設的備選文字

或者，我們可以使用偽元素來替換顯示出來的預設備選文字，通過在預設文字上方放置一個偽元素的方式，使其在檢視中隱藏。

img { /* Same as first example */ }

img:after {  
  content: "f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

img { /* Same as first example */ }

img:after {

content: "f1c5" " " attr(alt);

font-size: 16px;

font-family: FontAwesome;

color: rgb(100, 100, 100);

display: block;

position: absolute;

z-index: 2;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #fff;

}

其他的美化樣式

除了顯示自定義資訊（或者說換一種方法），我們還可以使用偽元素給載入失敗的圖片應用更多的樣式。

img {  
  /* Same as first example */
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

img {

/* Same as first example */

min-height: 50px;

}

img:before {

content: " ";

display: block;

position: absolute;

top: -10px;

left: 0;

height: calc(100% + 10px);

width: 100%;

background-color: rgb(230, 230, 230);

border: 2px dotted rgb(200, 200, 200);

border-radius: 5px;

}

img:after {

content: "f127" " Broken Image of " attr(alt);

display: block;

font-size: 16px;

font-style: normal;

font-family: FontAwesome;

color: rgb(100, 100, 100);

position: absolute;

top: 5px;

left: 0;

width: 100%;

text-align: center;

}

如果載入成功，圖片會正常顯示所有的樣式。偽元素也完全不會生成。

瀏覽器相容性

很不幸，不是所有的瀏覽器都可以用相同的方式處理載入失敗的圖片。對於某些瀏覽器，即使圖片沒有呈現，偽元素也根本不會顯示。

這是我通過自己的測試得出的相容性結論：

Browser	Alt Text	:before	:after
Chrome (Desktop and Android)	✓	✓	✓
Firefox (Desktop and Android)	✓	✓	✓
Opera (Desktop)	✓	✓	✓
Opera Mini	✓ **	✗	✗
Safari (Desktop and iOS)	✓ *	✗	✗
iOS Webview (Chrome, Firefox, others)	✓ *	✗	✗