img 標籤載入失敗顯示預設圖片的解決方案

前言

網頁開發中，圖片載入失敗時顯示預設圖片是常見需求。HTML <img> 標籤提供 onerror 事件屬性，可在圖片載入錯誤時觸發替換邏輯。本文說明如何正確處理單雙引號轉義，並提供前後端兩種實作範例。

核心原理

onerror 屬性接受 JavaScript 程式碼。當圖片載入失敗，瀏覽器會執行該程式碼。典型寫法：onerror="this.src='default.jpg'"。關鍵在於正確處理引號巢狀與轉義。

後端組裝標籤

Java 後端拼接 HTML 字串時，需對單引號進行轉義：

String imgUrl = "javascript:this.src='https://172.21.96.31:88/k/default.jpg'";
digest += "<img src='" + thumbnail + "' width='85px' height='70px' onerror=\"" + imgUrl + "\">";

輸出 HTML：<img src='...' onerror="javascript:this.src='default.jpg'">。

前端組裝標籤

JavaScript 前端動態生成時，同樣注意引號轉義：

var imgPath = "javascript:this.src='https://172.21.96.31:88/k/default.jpg'";
_digest += '<div>';
_digest += '<img src="' + streamuri + '/keyframes/' + mmoId + '/char.JPG" onerror="' + imgPath + '" width="85px" height="70px">';
_digest += '</div>';

常見坑點

• 單引號 ' 與雙引號 " 巢狀時必須正確轉義，否則導致 HTML 結構破壞或 JS 語法錯誤。
• 建議使用模板字面值或專門的 HTML 轉義函式庫，減少手動拼接錯誤。

進階建議

現代專案可考慮使用 <img> 的 loading="lazy" 搭配 IntersectionObserver，或採用 Vue/React 等框架的錯誤邊界元件，統一處理圖片載入失敗邏輯，提升維護性。