樣式化加載失敗的圖檔

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

加載失敗的圖檔是比較醜陋的，比如

但是我們可以讓結果變得更美好。通過給

元素設定CSS相關屬性可以實作更美的呈現。

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

我們可以針對IMG元素設定排版相關的CSS樣式（諸如font等屬性）。一旦IMG的可替換文本（即alt屬性）出現，則設定的CSS樣式應用于這些文本；
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占位符的實作下，嘗試另外一種風格的實作也未嘗不可。這樣不僅僅減少了許多代碼量，而且保證了全站圖檔加載失敗所呈現的一緻性。