[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=”圖片讀取失敗” /> 若圖片讀取失敗,會將 alt […]

Continue reading