本片文章翻譯自 Styling Broken Images 翻譯過程中可能會在原意不變的基礎上有些細微改動，望讀者見諒

載入失敗的圖片是比較醜陋的，比如

但是我們可以讓結果變得更美好。通過給元素設定CSS相關屬性可以實現更美的呈現。

IMG元素你需要知道的兩點知識

1. 我們可以針對IMG元素設定排版相關的CSS樣式（諸如font等屬性）。一旦IMG的可替換文字（即alt屬性）出現，則設定的CSS樣式應用於這些文字；
2. IMG元素屬於可替換元素（可替換元素是指元素的外觀和大小受外部源所影響，常見的可替換元素如IMG，OBJECT，INPUT，TEXTAREA等）。正由於可替換元素收外部源的影響，因此CSS中的偽元素::before、::after
   對它不起作用。但是，一旦圖片載入失敗，偽元素就可作用於圖片之上。

理解了上述兩點，我們就可以用CSS實現一個特殊的功能：

當圖片正常載入時無需處理，而當載入失敗時讓圖片應用一些特殊的樣式，以達到更好的使用者體驗效果。

實踐

採用如下的例項程式碼：

<img src="http://nopic.jpg" alt="休要胡說"> 

新增CSS樣式

一旦圖片載入失敗，我們需要向用戶提供相關文案，這就用到了CSS的attr函式

示例程式碼：

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

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

        img:before {
            content: "抱歉，圖片載入失敗 :(";
            display: block;
            margin-bottom: 10px;
        }

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

替換alt文字

為了讓載入失敗的圖片呈現更為美觀，採用偽元素來進行絕對定位，更自由的控制表現。

img { /* Same as first example */ }

img:after {
            content: "\f1c5" " " attr(alt);
            font-size: 16px;
            font-family: FontAwesome;
            color: rgb(100, 100, 100);
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ddd;
        }
 

新增額外的樣式

利用偽元素可以新增更多的額外樣式：

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;
}

正如第二節所說，如果圖片正常載入，那麼偽元素中設定的所有樣式都不會被作用，因此這種方式作為一種backup，是非常有效的。

相容性

不幸的是不是所有的瀏覽器都會這樣處理應用在IMG元素上的偽元素。這是我整理的相容性表格：

* alt文字自由在圖片的寬度足夠容納下它時才會顯示，如果圖片沒有寬度，alt文字壓根不會顯示

** 字型樣式不會起作用

譯者注：
其實，針對IMG元素設定偽元素是非常好的一種backup方案，即使針對某些不支援該特性的瀏覽器而言也是沒有副作用。因此在通常針對IMG元素使用base64佔位符的實現下，嘗試另外一種風格的實現也未嘗不可。這樣不僅僅減少了許多程式碼量，而且保證了全站圖片載入失敗所呈現的一致性。