當我們在網頁中載入外部圖片時，時常會使用 HTML 的 標籤 src 來嵌入圖片來源，這也是其中一個可以允許發送跨域請求的 HTML 標籤。
PS. 跨域請求：簡單來說就是可以載入任意網域的外部資源，因此常是 XSS 的攻擊方式之一。(這邊不多談)
若外部網域發生錯誤，圖片無法正常顯示則會產生一個醜醜的小縮圖，如以下範例：
因此若你的網站有大量外部資源圖片，就可能因為圖片載入失敗而影響排版與視覺觀感。
其實預設在 標籤本身就附帶 onload、onerror、onabort 幾個事件來判斷圖片是否載入成功
- onload：當圖片成功載入時觸發此事件。
- onerror：當圖片載入失敗時觸發此事件。
- onabort：當使用者手動中斷此圖片的載入，如：點擊瀏覽器左上角的停止載入按鈕。
我們可以透過以下的程式碼來測試以上情況所觸發的事件
PS. 在瀏覽器按下 F12，選擇主控台或 console 即可看見不同情況的輸出訊息。
因此大家可能會想，那就可以利用此事件。當圖片載入發生錯誤，我們就將 src 替換為替代圖片。
因此可寫出如以下的程式碼
但是以上這段程式碼可能會發生無窮迴圈而無止盡執行的錯誤。
若 noimage.jpg 也發生錯誤，就會導致無止盡的替換 src ，但又無止盡的發生錯誤，造成網頁的崩潰。
以上說了這些事件，是希望大家能對事件有初步的了解及可能的應用。
再來我們進入主題，可以如何使用CSS來做取代圖片
首先我們來看 這個標籤，當讀取圖片失敗時有沒有什麼特性。
- 若圖片讀取失敗，會將 alt 屬性的文字顯示出來。
- img 標籤本身若讀取成功則會取代成圖片，若失敗時，此標籤內容並不會被取代，所以我們可能可以應用此元素的 :after 及 :before 的 CSS 置放一些內容。
利用以上兩點特性我們就可以實作程式碼來測試囉!
透過以上範例，應該就可以了解如何使用 :after 與 :before 及 alt 這些方法來做圖片載入失敗的取代方案。
參考資料：