網站圖片無法顯示時，先打開瀏覽器的開發人員工具，在 Network（網路）面板找到那張圖片的請求，依狀態碼對症處理：404 代表伺服器找不到檔案，查路徑、檔名大小寫與搬家後留下的舊網址；403 代表伺服器拒絕提供，查檔案權限、防盜連與防火牆規則；請求被封鎖時，檢查 HTTPS 頁面裡的 http 圖片與內容安全政策；換了圖卻還是舊圖，則是 CDN 或瀏覽器快取。請求正常卻仍空白，再看格式與延遲載入的程式。
先分辨是哪一種「無法顯示」
先對照症狀縮小範圍：
| 看到的狀況 | 優先檢查的方向 |
|---|---|
| 出現破圖示或替代文字 | 圖片請求失敗，看狀態碼 |
| 版面空白，沒有破圖示 | CSS 背景圖、延遲載入程式，或 alt 屬性為空的失敗圖片 |
| 只有部分裝置或瀏覽器出問題 | 響應式圖片的某個尺寸檔、瀏覽器不支援的格式 |
| 換了新圖，畫面還是舊圖 | 瀏覽器快取或 CDN 快取 |
| 登入後台的人看得到，訪客看不到 | 檔案權限、外掛設定或快取版本不同 |
MDN 說明，圖片無法載入時瀏覽器可能改顯示 alt 文字，alt 為空時則會隱藏破圖示，所以一片空白不一定代表程式沒輸出圖片。若整個網站都打不開，屬於整站故障，請改依網站掛掉的排查順序處理。
用開發人員工具找出失敗的請求
以 Chrome 為例，依下列步驟找出是哪一張圖、為什麼失敗：
- 在頁面上按右鍵選「檢查」，開啟開發人員工具，切換到 Network（網路）面板；官方文件只有英文介面名稱，中文介面的標籤可能不同，以畫面為準。
- 勾選 Disable cache（停用快取）核取方塊，模擬初次造訪的訪客，再重新整理頁面。
- 在資源類型篩選中選 Img，只顯示圖片請求。
- 看 Status 欄位：顯示 404、403 這類狀態碼，或 failed 加上錯誤訊息；被封鎖的請求會以紅色標示。
- 切換到 Console（控制台），混合內容與內容安全政策的警告會出現在這裡。
- 把圖片網址貼到新分頁直接開啟，確認檔案本身能不能讀取。
記下失敗的圖片網址、狀態碼與錯誤訊息，後面都從這三項判斷。
狀態碼 404：路徑、檔名與搬家後的舊網址
404 代表伺服器找不到要求的資源。常見原因與檢查方式：
- 相對路徑跑掉：images/a.jpg 這類相對路徑會依頁面所在目錄解讀，頁面網址層級一改就可能指錯位置，可改用 /images/a.jpg 這類從根目錄開始的路徑。
- 大小寫不一致：MDN 提醒多數網頁伺服器區分大小寫，MyImage.jpg 和 myimage.jpg 可能被當成不同檔案。電腦上正常、上傳主機才失敗時，先檢查這點。
- 檔名有空白：空白在網址中會被編碼，系統若假設檔名和網址完全一致就可能出錯，檔名建議改用小寫英文與連字號。
- 搬家或改網域後的舊網址：WordPress 文件說明，圖片連結儲存在資料庫的文章內容裡，換網域後仍會指向舊網域。官方建議先備份資料庫，再用 WP-CLI 的搜尋取代功能更新，並跳過 GUID 欄位不要修改。
狀態碼 403：權限、防盜連與防火牆
403 代表伺服器理解請求但拒絕處理，重新驗證身分也不會改變結果。MDN 也提到伺服器可能改回應 404 來隱藏資源存在，404 查不到原因時也要回頭檢查權限。
- 檔案權限：以 WordPress 文件針對共用主機的建議為例，目錄讓擁有者可讀寫與進入、其他人只能讀取與進入；檔案讓擁有者可讀寫、其他人只能讀取。官方也明確表示任何目錄都不應設成所有人可寫入，連上傳目錄也一樣。
- 防盜連設定：Apache 文件的防盜連做法，是依 Referer 標頭判斷來源，不符合的請求直接拒絕，回應 403。新增網域、改用 www 或加開子網域後，若沒有把新網址加入允許清單，自家頁面的圖片也會被擋。Referer 本身是選用且可偽造的，防盜連只能降低外站引用。
- 防火牆與安全外掛：主機或網站應用程式防火牆的規則可能把圖片路徑誤判為可疑請求，可在後台的阻擋紀錄依時間與網址比對。
請求被封鎖：混合內容與內容安全政策
網站改成 HTTPS 後，頁面裡仍寫著 http 開頭的圖片，就是混合內容。MDN 說明，以 src 屬性指定的 img 圖片請求會自動升級成 https；若對方主機沒有提供 https 版本，圖片就載入失敗。以 srcset 或 picture 指定的圖片不會升級，屬於會被封鎖的內容；網址的主機若是 IP 位址而不是網域，請求也會直接被封鎖。另外，CSS 以 url() 載入的資源列在可封鎖內容，background-image 這類背景圖的 http 網址可能被封鎖，所以背景圖特別容易「沒有錯誤頁、只是不見」。修正方式是把自家資源改成 https 或相對路徑，外站資源改用對方的 https 版本；網址列出現的不安全警告，可參考網站顯示不安全的排查方式。
內容安全政策（CSP）的 img-src 指令規定可以載入圖片的來源，未設定時沿用 default-src，來源不在清單裡的圖片會被瀏覽器封鎖。新增 CDN 或外部圖庫網域時，記得同步更新。
圖片換了卻沒更新：快取與 CDN
MDN 的 HTTP 快取說明指出，快取以網址區分資源，回應一旦存進快取，在到期前伺服器很難主動刪除；Clear-Site-Data 標頭可清除瀏覽器快取，但對 CDN 這類中間快取沒有作用。處理順序如下：
- 先用開發人員工具勾選 Disable cache 重新整理，排除自己瀏覽器的快取。
- 仍是舊圖時，可能是 CDN 這類共用快取。MDN 說明代管的快取可以透過後台或 API 清除，請到 CDN 後台清除該圖片網址。
- 長期做法是換圖時改檔名或在網址加上版本，讓快取把它當成新資源，也就是 MDN 所說的快取破壞（cache busting）。
請求正常卻是空白：格式與延遲載入
- 格式：MDN 列出的網頁常用圖片格式包括 APNG、AVIF、GIF、JPEG、PNG、SVG、WebP；TIFF 除了 Safari 之外瀏覽器不原生支援，可能只在部分瀏覽器出現。
- 檔案損毀或尺寸資訊錯誤：MDN 列出的圖片載入錯誤包括 src 為空、圖片損毀、中繼資料損毀且沒有指定尺寸，以及格式不受支援。
- 延遲載入：img 的 loading 屬性設為 lazy，圖片會在接近可視範圍時才載入。若是外掛或程式把網址先放在其他屬性、捲動後才換回 src，程式出錯時圖片就會一直空白。Google 建議使用瀏覽器內建的延遲載入或 IntersectionObserver，不要依賴捲動、點擊等使用者動作。
常見問題
為什麼電腦看得到圖片，手機卻破圖？
響應式圖片由瀏覽器從 srcset 列出的多個尺寸中自行挑選，手機挑到的那個尺寸檔可能不存在。用開發人員工具模擬手機，查看實際請求的檔名與狀態碼。
媒體庫看得到圖片，文章裡卻無法顯示，是什麼原因？
可能是文章內容還寫著舊網域或 http 開頭的圖片網址，或引用的縮圖尺寸已被刪除。打開文章原始碼，比對圖片網址和媒體庫的檔案網址是否相同。
可以把資料夾權限改成所有人都能寫入，來解決圖片問題嗎？
不建議。WordPress 官方文件明確表示任何目錄都不應開放所有人寫入，連上傳目錄也一樣。權限不足時，依主機環境把讀取權限調整到網頁伺服器讀得到即可。
清除快取後圖片還是舊的，該怎麼辦？
先確認清的是哪一層快取。瀏覽器、網站快取外掛與 CDN 各自儲存一份，任一層沒清都可能看到舊圖。換圖時改用新檔名，可以避開多層快取的問題。
修好之後，怎麼確認 Google 也看得到圖片？
在 Search Console 用網址檢查工具對該頁執行即時測試，再看已測試網頁的螢幕截圖與已載入的資源。網址必須屬於目前開啟的資源，頁面也要不需登入就能存取。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
先記下失敗圖片的網址、狀態碼與錯誤訊息，再依本文順序排查。京采的技術 SEO 與網站健檢服務可以協助檢查全站的圖片請求、混合內容、檔案權限與快取設定，並在改網域或改版後比對新舊網址；需要時也能一併處理主機與 CDN 的設定。想請我們檢查網站的圖片問題，歡迎與我們聯繫。
