原文連結：Styling Broken Images，by Ire Aderinokun
如果 <img> 的 src 屬性值是一個無效地址，最終的渲染結果就很醜陋：
<img src="http://bitsofco.de/broken.jpg" alt="This image is broken! Ugly, isn’t it?">
複製程式碼我們看到的是一個破碎的圖片（Broken Images）：
<img> 元素上的兩個事實
在理解給破碎圖片新增樣式的方式前，我們需要先學習 <img> 元素上存在的兩個事實：
- 我們可以在
<img>元素上使用常規的排版相關樣式。 這些樣式會被應用到替換文字上（即alt屬性值），如果圖片正常顯示了，這些樣式也不會影響圖片的渲染。 <img>元素是替換元素。 這就表示“該類元素的外觀和尺寸是受到外部資源控制的”（Sitepoint）。因為元素是受到外部資源控制的，因此::before、::after偽元素的樣式並不會影響圖片渲染。然而，當圖片因為地址無效或網路等原因載入失敗後，偽元素就出現了。
正是基於上面的兩個事實，才讓我們為破碎圖片設定樣式成為可能。
擼程式碼
我們還是基於上面的無效圖片地址，設定樣式：
<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 { /* 樣式跟第一個例子裡是一樣的 */ }
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 {
/* 樣式跟第一個例子裡是一樣的，然後加了下面一個宣告 */
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 src="/content/images/2016/02/Screen-Shot-2016-02-27-at-12-42-08.png" alt="Image not broken">
複製程式碼瀏覽器相容性
不幸的是，並非所有瀏覽器都以相同的方式處理損壞的圖片。對於某些瀏覽器，即使圖片沒有顯示，偽元素也不會顯示。
下面，是我的測試結果：
* 只有在圖片的寬度足夠大時，alt 文字才會顯示出來。如果沒有為 <img> 指定寬度，alt 文字可能根本就顯示不出來。
** 設定的字型樣式無效。
對於不支援偽元素的瀏覽器，所應用的樣式將被忽略，因此不會造成破壞性干擾。這表示著我們仍然可以上面的樣式方案，並在支援的瀏覽器上為使用者提供更愉快的體驗。
（正文完）
廣告時間（長期有效）
我有一位好朋友開了一間貓舍，在此幫她宣傳一下。現在貓舍裡養的都是布偶貓。如果你也是個愛貓人士並且有需要的話，不妨掃一掃她的【閒魚】二維碼。不買也不要緊，看看也行。
（完）