1、傳統的圖片異常處理

<img>如果因為網路或者跨域限制等原因無法正常載入，在預設情況下會顯示瀏覽器預設的“裂開”的圖片效果，如果設定了 alt 屬性值，則 alt 屬性對應的內容也會一併顯示。例如：

<img src="//www.zhangxinxu.com/zxx.ico" alt="府谷市民小柴">

　例如Chrome瀏覽器下的效果截圖如下所示：

可以看到圖片載入異常之後的視覺效果實在是太粗糙了，程式設計師可忍設計師不可忍，因此，為了更好的視覺效果，實際專案開發中，我們總會對圖片載入異常的邊界場景進行額外的處理。

傳統的圖片載入異常會使用一個載入失敗的佔位符代替，這個佔位圖通常會是一張裂開的圖片。

例如下面這張圖：

觸發使用佔位圖可以通過 onerror 事件，程式碼示意如下：

<img src="xxx.png" alt="府谷市民小柴" onerror="this.src='break.svg';">

其中第2張圖片故意使用了一個錯誤的地址，結果如下截圖所示：

然而上面這種實現方式有一個比較致命的問題，那就是使用者並不清楚無法顯示的圖片具體表示的含義是什麼。

2、最佳實踐，同時顯示alt資訊

為了便於維護，影象載入error的時候不再是替換src地址，而是新增一個錯誤類名，通過錯誤error函式新增class名稱error,例如 .error ：

<img src="zxx.png" alt="府谷市民小柴" onerror="this.classList.add('error');">

然後配合使用如下所示的CSS（部分CSS樣式細節大家可以根據自己的審美進行修改）：

img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
}
img.error::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #f5f5f5 url(break.svg) no-repeat center / 50% 50%;
}
img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0,0,0,.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

此時就可以看到失敗的圖片和alt文字資訊同時出現的效果了。

眼見為實，您可以狠狠地點選這裡：圖片載入異常同時顯示alt資訊demo

對應的顯示效果參見下面的截圖：

可以看到，內容展示和視覺表現同時兼顧了，是我這些年打磨出來的目前最好的影象載入異常兜底處理實踐，一段程式碼整站通用，低成本高收益。

完結： 2020-10-26 12:01:06