Skip to content

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

Published: at 05:23 AM (4 min read)

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

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

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

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


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

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

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

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

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

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

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

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

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


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

圖片讀取失敗 圖片讀取失敗

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

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

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

參考資料:

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