在前端开发过程中，我们几乎都遇到过这种情况：

页面中某张图片加载不出来，显示成一个小小的"裂图"图标。

这看似简单的问题，实际上可能由多种原因造成，尤其是在 HTTPS 环境下，混合内容机制（Mixed Content） 是最常见、也最容易被误解的根源之一。

本文将带你系统梳理裂图的各种原因、排查思路，并重点讲清楚混合内容的原理与浏览器行为。

一、什么是"裂图"？

"裂图"（broken image）是指浏览器尝试加载 标签的图片资源失败时的表现形式。

常见表现：

图片区域显示为灰底、叉号、占位符；

控制台出现 Failed to load resource 或 Mixed Content 警告；

Network 面板中图片请求状态码为 404 / 403 / blocked。

二、常见的裂图原因汇总

2.1 图片资源不存在

最基础的情况。可能是：

路径错误（相对/绝对路径混乱）；

资源被删除或未上传；

OSS/CDN 缓存未刷新；

拼接 URL 时丢失了参数（如签名 URL 过期）。

排查建议：

打开 Network 面板；

直接在浏览器地址栏访问图片 URL；

看返回码是否为 404 或 403。

2.2 图片服务器防盗链（Referer 校验）

很多图片或 CDN 都会校验 Referer，限制图片只能在指定域名下访问。

如果请求来源不在白名单内，服务器会拒绝访问（403）。

典型症状：

Network 状态码 403；

响应头中带有自定义防盗链提示。

解决办法：

通过后端代理请求；

或联系服务端将当前域加入 Referer 白名单。

2.3 响应头设置错误（Content-Type / Content-Disposition）

如果返回头不是图片类型（例如 text/html），浏览器可能无法渲染；

如果设置了 Content-Disposition: attachment，浏览器会触发下载行为，但现代浏览器对图片通常会放行显示。

2.4 权限与签名失效

某些云存储（如 OSS / COS / S3）要求签名 URL 才能访问。

签名过期后图片加载失败

2.5 CSP 限制（Content-Security-Policy）

如果页面设置了严格的 CSP 策略，例如：

复制代码

Content-Security-Policy: img-src https://static.example.com

那么任何不在允许列表内的图片都会被阻止。

三、混合内容机制（Mixed Content）

这是前端 HTTPS 场景下导致"裂图"的核心原因之一。

这种情况一般控制台会报错：net::ERR_CERT_COMMON_NAME_INVALID

3.1 混合内容是什么？

一个通过 HTTPS 加载的页面，去请求**非 HTTPS（HTTP）**的资源。

html

复制代码

此时页面是安全的，但图片请求是不安全的，浏览器会认定为"混合内容"。

3.2 为什么要阻止混合内容？

因为 HTTP 请求容易被中间人攻击。

攻击者可以篡改图片、注入恶意脚本、或监听请求，从而破坏整个 HTTPS 页面的安全性。

3.3 混合内容的两种类型

类型

说明

浏览器行为

主动混合内容（Active Mixed Content）

能影响页面逻辑的内容，例如