網站圖片終極備援方案：用 onerror 與 CSS 杜絕叉燒包，並美化失效樣式
您是否也曾遇過部落格文章或網站中的圖片，因為來源連結失效或圖片被意外刪除，而變成一個無法顯示的「叉燒包」圖示？這不僅嚴重影響了文章的專業度，也讓讀者的閱讀體驗大打折扣。
本篇教學將提供您一套完整且專業的解決方案。我們將透過兩大步驟，不僅徹底解決圖片失效問題，更進一步美化圖片的顯示樣式，確保您的網站在任何情況下都維持優雅與穩定。
步驟一：建立備援機制 - 善用 onerror 事件
我們的核心解法，是在圖片的 HTML 標籤中加入一個 onerror 屬性 (Attribute)。它的作用就像一個保險，當原始圖片載入失敗時，會自動執行備案，載入一張我們預先準備好的替代圖片。
HTML 程式碼範例
請將您原本的 <img> 標籤，修改成以下結構：
<img src="[此處貼上您實際的圖片網址]"
onerror="this.onerror=null;this.src='https://placehold.co/480x270/CCCCCC/000000?text=圖片載入失敗';"
class="head-pic"
alt="這是一張圖片的描述文字" />屬性詳解
src
HTML 屬性指定圖片的來源網址。
瀏覽器會優先嘗試載入此屬性指向的連結。如果成功，圖片就會正常顯示；如果失敗（例如網址錯誤或圖片被刪除），則會觸發 onerror 事件。
onerror
HTML 屬性當圖片載入失敗時觸發的 JavaScript 事件。
這是整個備援方案的關鍵。引號內的程式碼會被執行：
- this.onerror=null;：清除 onerror 事件，這是為了避免當備用圖片也失效時，不斷重複觸發，造成無限迴圈。
- this.src='...'：將圖片的來源 (src)，強制替換成一個我們指定的備用圖片網址。
class
HTML 屬性為 HTML 元素指定一個或多個 CSS 類別名稱。
它的作用就像為元素貼上一個標籤（例如 "head-pic"）。之後我們就可以在 CSS 中，針對所有貼有這個標籤的元素，統一設定它們的樣式。
alt
HTML 屬性提供圖片的替代文字說明。
這對 SEO 和無障礙閱讀至關重要。當圖片無法顯示時，瀏覽器會顯示這段文字；螢幕閱讀器也會朗讀這段文字，幫助視障使用者理解圖片內容。
步驟二：統一視覺風格 - 用 CSS 美化外觀
光是能正常顯示還不夠，我們希望不論是原始圖片還是備用圖片，都能有固定的比例、圓角和外框，讓版面更整齊美觀。這需要透過 CSS (Cascading Style Sheets) 來完成。
CSS 程式碼範例
請將以下 CSS 程式碼加入到您網站的樣式表中（例如 Blogger 的「主題」>「自訂」>「進階」>「新增 CSS」）。
/* 文章主圖的樣式 */
.post-body .head-pic {
/* --- 尺寸與比例 --- */
width: 100%; /* 圖片寬度佔滿容器 */
max-width: 720px; /* 但最大寬度不超過 720px */
aspect-ratio: 16 / 9; /* 維持 16:9 的寬高比 */
object-fit: cover; /* 維持比例填滿，多餘部分裁切 */
/* --- 排版與外觀 --- */
display: block; /* 轉為區塊元素，解決圖片間隙 */
margin: 20px auto; /* 上下邊距 20px，並水平置中 */
border: 1px solid #EAEAEA; /* 淺灰色外框 */
border-radius: 12px; /* 圓角效果 */
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 細緻的陰影 */
}CSS 屬性詳解
aspect-ratio
CSS 屬性設定元素的寬高比。
這是一個現代 CSS 的強大屬性。設定為 16 / 9 後，無論寬度如何變化，元素的高度都會自動調整以維持 16:9 的電影寬螢幕比例，讓版面非常整齊。
object-fit
CSS 屬性控制圖片或影片如何填滿其容器。
搭配 aspect-ratio 使用時，cover 值能確保圖片在不扭曲變形的前提下，完整填滿指定的比例容器，多餘的部分會被自動裁切，效果類似背景圖的 background-size: cover。
display
CSS 屬性設定元素的顯示類型。
圖片預設是行內元素 (inline)。將其設定為 block (區塊元素) 有兩個好處：
1. 解決圖片底部有時會出現的神秘小間距。
2. 讓 margin: auto; 水平置中效果能夠生效。
總結
透過「onerror 屬性」與「CSS 統一樣式」這兩個簡單步驟的結合，您就為網站的圖片建立了一套強大的備援與美化機制。這不僅能避免使用者看到掃興的「叉燒包」，更能確保無論圖片是否成功載入，您的網站版面都能維持高度的專業性與視覺一致性。現在就動手為您的網站圖片加上這道保險吧！