WordPress 圖片破圖、手機看不到圖，照這個順序查

為什麼會這樣 #

圖片顯示要過三關：檔案存在、網址正確、瀏覽器願意載入。搬家沒帶 uploads 資料夾、媒體庫誤刪、外置到雲端後刪了本機檔但某些地方仍指向本機，是第一關；網站改成 HTTPS 後內文還是 http 圖址，瀏覽器會擋混合內容，舊網域寫死在內容裡，是第二關；優化外掛的延遲載入把圖片交給 JavaScript，JS 衝突就一片空白，或某段自訂 CSS 把圖片高度設成 0，是第三關。

手機獨有的破圖幾乎都出在第三關：Elementor 每個區塊可以針對手機隱藏、可以指定不同的背景圖，改電腦版時很容易漏掉手機版；WebP 在幾年前的 iOS 上不支援；圖片尺寸過大也會讓手機瀏覽器放棄載入。

怎麼處理 #

1. F12 打開開發者工具的 Network 頁籤篩選 Img，重新整理，紅色的就是失敗的圖，看狀態碼：404 檔案不在、403 權限或防盜連被擋、被標示 mixed content 是 http 網址。
2. 404：到媒體庫搜檔名，在就重新插入；不在就從備份的 uploads 找回同路徑。剛搬家就整包補傳 uploads。
3. http 網址：用搜尋取代工具（Better Search Replace）把 http://你的網域 換成 https，Elementor 的資料要用 Elementor → 工具 → 取代網址 另外跑一次。
4. 直接開得了但頁面看不到：先停用優化外掛的延遲載入，恢復就把輪播、首屏圖片排除 lazyload；沒恢復就在開發者工具看該圖的 CSS 有沒有被設成 display:none 或高度 0。
5. 只有手機：切到 Elementor 的行動裝置檢視，看該區塊的「回應式」是否勾了隱藏、背景圖是否手機版另設了一張已刪掉的圖；圖片格式若是 WebP，留 JPG 備援或用外掛自動轉換。
6. 媒體外置後破圖：外置外掛只改寫媒體庫附件的網址，Elementor 產生的 CSS 檔、佈景自訂的 logo、頁尾小工具、電子郵件範本裡的圖都不在它的清單。先保留本機檔，用抽樣頁面比對哪些網址還指向本機，補改或加進保護清單後，才刪本機檔。
7. 改完清快取，換一台手機看。

我們實際遇過的情況 #

一個網站把媒體庫外置到雲端儲存、準備刪掉本機檔之前，我們先把公開頁面整批掃過，找出外置外掛改寫不到的引用，列進保護清單；先全量試跑、確認每個檔案在雲端都開得了，才正式刪，刪完再抽樣幾百個圖片網址確認沒有新的 404。第一次前置分析判定還不安全時，我們就先不刪——寧可多佔一點空間，也不要換來滿站破圖。即使這樣，事後仍發現少數動態載入的內容與社群分享圖沒改寫到，得再補。

另一個網站的影片播放器封面破圖，是封面圖的附件遺失；也有站的圖片顯示不出來，排查方向指向圖址還是 http。

什麼時候該找人 #

破圖數量以百計、uploads 資料夾整個不見、或外置後本機檔已經刪掉又發現大量引用沒改到——這時亂改網址或重新上傳只會讓對照關係更亂，需要有人從備份與資料庫層面對回去。相關：快取要清哪幾層、搬家檢查清單。

網站正在出這個問題？網站救援當日受理；想有人每月幫你顧著：網站守護方案。