網站上線後，圖片是最容易出問題的內容之一。文字通常存在資料庫裡，發佈時不容易遺失；圖片卻要同時依賴檔案位置、連結寫法、伺服器設定和外部平台，任何一環變化都可能讓頁面出現空白框或破圖。下面按常見現象、原因和檢查順序來說明。
圖片完全不顯示，先看瀏覽器主控台
打開出問題的頁面，按 F12 打開開發者工具，切到 Network（網路）面板，重新整理頁面，看圖片請求的狀態碼。常見的幾種情況：
- 404：檔案確實不在這個位址上，多半是路徑寫錯或圖片沒上傳。
- 403：檔案存在但伺服器不允許存取，常見於目錄權限設定或防盜連規則。
- 混合內容警告：頁面是 HTTPS，圖片卻用 http 開頭，瀏覽器會攔截。
- 請求被取消或逾時：圖片檔案過大，或外部連結伺服器回應慢。
狀態碼能幫你快速把問題縮小到某一類，比反覆重新上傳更有效。
上線遷移後圖片失效：路徑變了，引用沒變
舊站改版或換伺服器時，圖片檔案往往被重新組織到新的目錄結構裡，但文章正文裡的圖片連結還是舊位址。表現為：首頁和列表頁正常，點進舊文章圖片全是破圖。
處理順序建議是：
- 從後台匯出全部文章，把正文裡的圖片連結提取出來，形成一份舊連結清單。
- 把舊連結和新伺服器上的實際檔案路徑做對照，找出對不上的部分。
- 能保留舊目錄結構的就保留；不能保留的，在伺服器上設定跳轉，把舊圖片位址指向新位址。
- 跳轉只作為過渡，正文裡的連結最好逐步替換成新位址，避免以後再次遷移時又斷一次。
如果網站圖片數量多，這一步值得用指令碼或批次替換工具處理，人工逐篇改容易漏。
大小寫和中文檔名導致部分圖片打不開
有一類問題很隱蔽：同一張圖，在編輯電腦上能看，在伺服器上就是 404。常見原因是檔名大小寫不一致。Windows 系統對檔名大小寫不敏感，Linux 伺服器敏感，Banner.jpg 和 banner.jpg 會被當成兩個檔案。
另一種情況是檔名裡帶中文或空格。部分伺服器和 CDN 對這類字元的處理方式不同，連結在複製、貼上、轉碼過程中容易變形。
建議上傳前就統一命名規則，例如：
- 只用小寫英文字母、數字和短橫線。
- 用短橫線代替空格，不用底線混用。
- 名稱體現內容，便於團隊檢索，例如
service-consulting-01.jpg。 - 同一欄目的圖片放在同一目錄下，避免全部堆在根目錄。
外部連結圖片失效：別人的圖不是你的圖
有些營運人員圖省事，直接從其他網站複製圖片位址，貼到自己的文章裡。這類外部連結圖片有幾個風險：對方刪除或更換圖片後，你的頁面就出現破圖；對方開啟防盜連後，你的網站無法載入；對方伺服器不穩定時，頁面載入速度受影響。
判斷方法很簡單：在瀏覽器裡單獨打開這個圖片位址，看是否還能存取。如果圖片對內容重要，建議下載後上傳到自己的伺服器或圖床，再替換連結。引用外部圖片時也要注意版權，不要隨意使用來源不明的素材。
HTTPS 頁面載入 http 圖片
網站啟用 HTTPS 後，如果圖片連結還是 http 開頭，瀏覽器會把它當作不安全內容攔截，頁面出現破圖或安全提示。這類問題常見於早期上傳的圖片、從舊站複製過來的正文，以及第三方統計或廣告代碼裡的圖片。
檢查方法：在開發者工具主控台裡搜尋「Mixed Content」，或直接查看頁面原始碼裡的圖片位址。處理方式是把圖片位址改成 https，或者把圖片下載到自己的 HTTPS 網域下。如果圖片來自外部平台，先確認對方是否支援 https。
圖片能打開但顯示異常：尺寸、格式和壓縮問題
連結正常、狀態碼 200，但圖片顯示變形、模糊或只顯示一部分，通常和連結無關，而是圖片本身的問題：
- 圖片實際尺寸和頁面預留位置不匹配，被拉伸或裁切。
- 格式不被瀏覽器支援，例如某些特殊格式在部分瀏覽器上無法顯示。
- 圖片經過過度壓縮，細節遺失。
- 圖片檔案過大，載入慢，使用者看到的是空白佔位。
這類問題要在上傳前控制：按頁面實際展示尺寸準備圖片，不要用一張大圖靠代碼縮小；需要透明背景用 PNG，照片類內容用 JPG 或 WebP；單張圖片控制在合理大小，列表頁和詳情頁可以分別準備不同尺寸。
圖片連結的日常檢查清單
網站上線不是終點，圖片連結會隨著內容更新、伺服器調整和外部平台變化而失效。建議把下面幾項納入日常檢查：
- 新文章發佈前，在預覽頁逐張點開圖片，確認能正常顯示。
- 改版或遷移後，抽查舊文章裡的圖片，尤其是發佈時間較早的內容。
- 定期檢查使用了外部連結圖片的頁面，確認外部位址仍然有效。
- 檢查圖片檔名和目錄結構是否仍然符合團隊命名規則。
- 備份圖片檔案時，連同文章正文裡的連結一起備份，避免只備份檔案卻不知道哪篇文章在用。
圖片連結問題大多不是技術難題，而是維護習慣問題。把命名規則、上傳流程和檢查節點固定下來，比出問題後再逐張修復省力得多。
