前端圖片加載失敗、?img出現(xiàn)裂圖的原因超詳細(xì)解析
在前端開發(fā)過程中，我們幾乎都遇到過這種情況：
頁面中某張圖片加載不出來，顯示成一個(gè)小小的“裂圖”圖標(biāo)。
這看似簡單的問題，實(shí)際上可能由多種原因造成，尤其是在 HTTPS 環(huán)境下，混合內(nèi)容機(jī)制（Mixed Content） 是最常見、也最容易被誤解的根源之一。
本文將帶你系統(tǒng)梳理裂圖的各種原因、排查思路，并重點(diǎn)講清楚混合內(nèi)容的原理與瀏覽器行為。
一、什么是“裂圖”？
“裂圖”（broken image）是指瀏覽器嘗試加載 <img> 標(biāo)簽的圖片資源失敗時(shí)的表現(xiàn)形式。
常見表現(xiàn)：
圖片區(qū)域顯示為灰底、叉號(hào)、占位符；
控制臺(tái)出現(xiàn)
Failed to load resource或Mixed Content警告；Network 面板中圖片請(qǐng)求狀態(tài)碼為 404 / 403 / blocked。
二、常見的裂圖原因匯總
2.1 圖片資源不存在
最基礎(chǔ)的情況?？赡苁牵?/p>
路徑錯(cuò)誤（相對(duì)/絕對(duì)路徑混亂）；
資源被刪除或未上傳；
OSS/CDN 緩存未刷新；
拼接 URL 時(shí)丟失了參數(shù)（如簽名 URL 過期）。
排查建議：
打開 Network 面板；
直接在瀏覽器地址欄訪問圖片 URL；
看返回碼是否為 404 或 403。
2.2 圖片服務(wù)器防盜鏈（Referer 校驗(yàn)）
很多圖片或 CDN 都會(huì)校驗(yàn) Referer，限制圖片只能在指定域名下訪問。
如果請(qǐng)求來源不在白名單內(nèi)，服務(wù)器會(huì)拒絕訪問（403）。
典型癥狀：
Network 狀態(tài)碼 403；
響應(yīng)頭中帶有自定義防盜鏈提示。
解決辦法：
通過后端代理請(qǐng)求；
或聯(lián)系服務(wù)端將當(dāng)前域加入 Referer 白名單。
2.3 響應(yīng)頭設(shè)置錯(cuò)誤（Content-Type/Content-Disposition）
如果返回頭不是圖片類型（例如
text/html），瀏覽器可能無法渲染；如果設(shè)置了
Content-Disposition: attachment，瀏覽器會(huì)觸發(fā)下載行為，但現(xiàn)代瀏覽器對(duì)圖片通常會(huì)放行顯示。
2.4 權(quán)限與簽名失效
某些云存儲(chǔ)（如 OSS / COS / S3）要求簽名 URL 才能訪問。
簽名過期后圖片加載失敗
2.5 CSP 限制（Content-Security-Policy）
如果頁面設(shè)置了嚴(yán)格的 CSP 策略，例如：
Content-Security-Policy: img-src https://static.example.com
那么任何不在允許列表內(nèi)的圖片都會(huì)被阻止。
三、混合內(nèi)容機(jī)制（Mixed Content）
這是前端 HTTPS 場(chǎng)景下導(dǎo)致“裂圖”的核心原因之一。
這種情況一般控制臺(tái)會(huì)報(bào)錯(cuò)：net::ERR_CERT_COMMON_NAME_INVALID
3.1 混合內(nèi)容是什么？
一個(gè)通過 HTTPS 加載的頁面，去請(qǐng)求**非 HTTPS（HTTP）**的資源。
User agents must rewrite insecure schemes to secure schemes before fetching the resource.
This does not affect the DOM or the URL reflected to script.
<!-- 頁面本身是 https://example.com --> <img src="http://img.example.com/a.png">
此時(shí)頁面是安全的，但圖片請(qǐng)求是不安全的，瀏覽器會(huì)認(rèn)定為“混合內(nèi)容”。
3.2 為什么要阻止混合內(nèi)容？
因?yàn)?HTTP 請(qǐng)求容易被中間人攻擊。
攻擊者可以篡改圖片、注入惡意腳本、或監(jiān)聽請(qǐng)求，從而破壞整個(gè) HTTPS 頁面的安全性。
3.3 混合內(nèi)容的兩種類型
| 類型 | 說明 | 瀏覽器行為 |
|---|---|---|
| 主動(dòng)混合內(nèi)容（Active Mixed Content） | 能影響頁面邏輯的內(nèi)容，例如 <script>、<iframe>、XHR、CSS、WebSocket | ?? 直接阻止 |
| 被動(dòng)混合內(nèi)容（Passive Mixed Content） | 不影響邏輯的內(nèi)容，例如圖片、音視頻、CSS 背景圖 | ?? 可能被升級(jí)或阻止 |
3.4 可升級(jí)內(nèi)容（Upgradable Content）
從 Chrome 80+ / Edge 79+ / Firefox 83+ 起，瀏覽器對(duì)某些被動(dòng)混合內(nèi)容啟用了 “自動(dòng)升級(jí)機(jī)制”。
當(dāng)頁面是 HTTPS 時(shí)，如果 <img> 的地址是 HTTP，瀏覽器會(huì)嘗試自動(dòng)改為 HTTPS 重新加載。
3.4.1 舉例說明：
<!-- 頁面是 https://page.com --> <img src="http://cdn.page.com/pic.png" />
瀏覽器會(huì)自動(dòng)嘗試請(qǐng)求：
https://cdn.page.com/pic.png
如果資源服務(wù)器支持 HTTPS，就會(huì)成功顯示。
如果不支持或證書無效，加載失?。@示裂圖）。
注意瀏覽器在 network 面板請(qǐng)求的是 https 請(qǐng)求，但是 DOM 中還是現(xiàn)實(shí)的 http 地址，瀏覽器可不會(huì)自動(dòng)修改你的 DOM。
那么問題來了，為啥 DOM 沒變但是渲染的是 https？因?yàn)?nbsp;請(qǐng)求完成后，瀏覽器渲染的是“響應(yīng)的二進(jìn)制內(nèi)容”，不是 URL
圖片
<img>加載流程其實(shí)是：
DOM 給出 URL 字符串（http）
Resource Loader 把它升級(jí)成 https 并發(fā)送請(qǐng)求
請(qǐng)求返回后產(chǎn)生一個(gè) decoded image bitmap（解碼好的位圖）
<img>標(biāo)簽?zāi)玫降氖?“圖片數(shù)據(jù)對(duì)象”（Image Bitmap / Image Document）把這個(gè) bitmap 交給渲染引擎繪制在頁面上
也就是說，渲染用的不是 URL，而是“圖片數(shù)據(jù)”
3.4.2 瀏覽器不會(huì)把< img src=""> 改成 https
因?yàn)?URL 升級(jí)只是加載規(guī)則（fetching rule）的結(jié)果，不是文檔結(jié)構(gòu)(DOM) 的改變。
瀏覽器的設(shè)計(jì)理念：
DOM = 你的代碼
Loaders = 瀏覽器的行為
瀏覽器永遠(yuǎn)不會(huì)篡改你的 DOM 代碼，只在加載階段更換 URL。
3.5 哪些資源屬于“可升級(jí)內(nèi)容”
| 元素類型 | 是否會(huì)自動(dòng)升級(jí) |
|---|---|
<img> | ? 是 |
<audio> / <video> / <source> | ? 是 |
CSS 圖片（background-image, border-image） | ? 是 |
<script> / <iframe> / XHR | ? 否，直接阻止 |
?? 官方文檔參考：
MDN: 混合內(nèi)容（Mixed Content）
3.6 注意：不是“所有場(chǎng)景”都自動(dòng)升級(jí)
升級(jí)依賴瀏覽器支持；
如果資源使用了 IP、非標(biāo)準(zhǔn)端口或證書無效，不會(huì)升級(jí)；
如果頁面設(shè)置了 CSP：
Content-Security-Policy: upgrade-insecure-requests
則會(huì)強(qiáng)制所有 HTTP 請(qǐng)求都升級(jí)為 HTTPS
升級(jí)失敗依然會(huì)導(dǎo)致裂圖。
3.7 為什么以前的說法是“不會(huì)自動(dòng)改為 https”
因?yàn)樵?Chrome 80 之前（2020 年以前），瀏覽器并不具備“自動(dòng)升級(jí)”行為，只是警告或阻止。
現(xiàn)在的混合內(nèi)容機(jī)制是新一代瀏覽器安全策略的演進(jìn)結(jié)果。
3.8 HTTP 頁面加載 HTTPS 圖片會(huì)怎樣？
不會(huì)觸發(fā)混合內(nèi)容，HTTP 頁面加載 HTTPS 圖片完全合法，只是頁面本身不安全。
四、其他容易忽略的裂圖原因
4.1 跨域限制（Canvas 繪制）
若 <img> 跨域加載資源后再畫到 <canvas> 上，未設(shè)置 crossorigin 會(huì)觸發(fā)安全限制。
4.2圖片過大或加載超時(shí)
大圖未能在超時(shí)時(shí)間內(nèi)返回，可能表現(xiàn)為裂圖。
4.3服務(wù)端緩存頭異常
過期或 ETag 不匹配，導(dǎo)致 CDN 無法正確命中圖片。
五、排查與修復(fù)建議
| 步驟 | 操作 | 檢查內(nèi)容 |
|---|---|---|
| 1 | Network 面板 | 查看狀態(tài)碼 / 請(qǐng)求協(xié)議（HTTP or HTTPS） |
| 2 | Console 控制臺(tái) | 搜索 Mixed Content 或 Failed to load resource |
| 3 | 直接訪問 URL | 檢查是否可用、證書是否有效 |
| 4 | 檢查 CSP | 是否限制了 img-src 來源 |
| 5 | 檢查響應(yīng)頭 | Content-Type、Referer、防盜鏈策略等 |
六、總結(jié)
混合內(nèi)容機(jī)制是現(xiàn)代瀏覽器為保證 HTTPS 安全性而做出的妥協(xié)與平衡。
對(duì)于前端開發(fā)者而言，理解它的升級(jí)與阻止邏輯，是解決“裂圖”的關(guān)鍵。
| 類別 | 原因 | 瀏覽器行為 | 解決方案 |
|---|---|---|---|
| 資源不存在 | 404 | 裂圖 | 修正路徑 |
| 防盜鏈 | 403 | 裂圖 | 調(diào)整 Referer 或代理 |
| HTTP → HTTPS 混合內(nèi)容 | 被動(dòng)混合內(nèi)容 | 自動(dòng)升級(jí)或阻止 | 改為 HTTPS |
| CSP 限制 | 阻止加載 | 裂圖 | 修改策略 |
| Content-Type 錯(cuò)誤 | 無法解析 | 裂圖 | 服務(wù)端修正 |
| 簽名 URL 失效 | 403 | 裂圖 | 重新生成簽名 |
到此這篇關(guān)于前端圖片加載失敗、 img出現(xiàn)裂圖的原因超詳細(xì)解析的文章就介紹到這了,更多相關(guān)前端圖片加載失敗原因內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Visio 是一款專門繪制流程示意圖工具，由于很多剛?cè)肼毜男“讻]有安裝過visio，今天小編抽空給大家分享下Viso 2019 下載與激活方法，感興趣的朋友一起看看吧2023-02-02
這篇文章主要為大家介紹了CommonLisp中解析命令行參數(shù)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
關(guān)于最新IDEA2020.2.1,2.2,3以上破解,激活失效,重新激活的問題
今天很多朋友找小編說idea2020.2.3版本激活失效了，下面通過本文給大家分享了最新IDEA2020.2.1,2.2,2.3，idea.3以上破解,激活失效,重新激活的解決方法，需要的朋友參考下吧2020-10-10
PHP和Java的主要區(qū)別有哪些？哪個(gè)最適合Web開發(fā)語言？
Java和PHP都是編程語言，大家知道它們最大的區(qū)別就是一個(gè)是靜態(tài)語言一個(gè)是動(dòng)態(tài)語言吧。沒錯(cuò)，Java是一種靜態(tài)語言，PHP是一種動(dòng)態(tài)語言。那它們還有哪些區(qū)別? 哪個(gè)最適合Web開發(fā)語言？下面，小編再給大家詳細(xì)介紹下。2016-08-08
ChatGPT?作為最快完成億活用戶的應(yīng)用，最近真的是火出天際了。今天分享5個(gè)?ChatGPT?功能，來提升我們的日常工作以及如何使用它提高代碼質(zhì)量2023-02-02
這篇文章主要為大家介紹了APAP?ALV進(jìn)階寫法及優(yōu)化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
持續(xù)集成工具之Jenkins安裝部署的詳細(xì)教程
這篇文章主要介紹了持續(xù)集成工具之Jenkins安裝部署,本文通過圖文的形式給大家啊介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
最近發(fā)現(xiàn)有很多網(wǎng)友都提出一個(gè)問題：程序的編譯與解釋有什么區(qū)別？這篇文章就為大家介紹了編譯和解釋的區(qū)別，需要的朋友可以參考下2016-12-12
本文通過講解TCP與UDP傳輸協(xié)議傳輸數(shù)據(jù)是的過程及詳細(xì)介紹什么是 socket及現(xiàn)在我么們和大家一起來學(xué)習(xí)吧2021-08-08
這篇文章主要介紹了Xmind用例導(dǎo)入到TAPD的方案,大家都知道XMind2TestCase?，該工具基于?Python?實(shí)現(xiàn)，通過制定測(cè)試用例通用模板，然后使用?XMind?這款廣為流傳且開源的思維導(dǎo)圖工具進(jìn)行用例設(shè)計(jì)，需要的朋友可以參考下2022-07-07