[HTML、CSS] 載入圖片失敗時,純 CSS 替代處理方法

當我們在網頁中載入外部圖片時,時常會使用 HTML 的 <img> 標籤 src 來嵌入圖片來源,這也是其中一個可以允許發送跨域請求的 HTML 標籤。

PS. 跨域請求:簡單來說就是可以載入任意網域的外部資源,因此常是 XSS 的攻擊方式之一。(這邊不多談)

若外部網域發生錯誤,圖片無法正常顯示則會產生一個醜醜的小縮圖,如以下範例:

因此若你的網站有大量外部資源圖片,就可能因為圖片載入失敗而影響排版與視覺觀感。


 

其實預設在 <img> 標籤本身就附帶 onload、onerror、onabort 幾個事件來判斷圖片是否載入成功

  • onload:當圖片成功載入時觸發此事件。
  • onerror:當圖片載入失敗時觸發此事件。
  • onabort:當使用者手動中斷此圖片的載入,如:點擊瀏覽器左上角的停止載入按鈕。

我們可以透過以下的程式碼來測試以上情況所觸發的事件

PS. 在瀏覽器按下 F12,選擇主控台或 console 即可看見不同情況的輸出訊息。

因此大家可能會想,那就可以利用此事件。當圖片載入發生錯誤,我們就將 src 替換為替代圖片。

因此可寫出如以下的程式碼

<img src=”404.jpg” onerror=”this.src=’noimage.jpg'” />

但是以上這段程式碼可能會發生無窮迴圈而無止盡執行的錯誤。

若 noimage.jpg 也發生錯誤,就會導致無止盡的替換 src ,但又無止盡的發生錯誤,造成網頁的崩潰。

以上說了這些事件,是希望大家能對事件有初步的了解及可能的應用。

再來我們進入主題,可以如何使用CSS來做取代圖片


首先我們來看 <img> 這個標籤,當讀取圖片失敗時有沒有什麼特性。

<img src=”404.jpg” alt=”圖片讀取失敗” />
圖片讀取失敗

  1. 若圖片讀取失敗,會將 alt 屬性的文字顯示出來。
  2. img 標籤本身若讀取成功則會取代成圖片,若失敗時,此標籤內容並不會被取代,所以我們可能可以應用此元素的 :after 及 :before 的 CSS 置放一些內容。

利用以上兩點特性我們就可以實作程式碼來測試囉!

 

透過以上範例,應該就可以了解如何使用 :after 與 :before 及 alt 這些方法來做圖片載入失敗的取代方案。

參考資料:

https://bitsofco.de/styling-broken-images/

Leave a Reply