在前端开发中，我们几乎都遇到过这种情况：页面里某张图片加载不出来，显示成一个小小的'裂图'图标。
这看似简单的问题，实际上可能由多种原因造成，尤其是在 HTTPS 环境下，混合内容机制（Mixed Content） 是最常见、也最容易被误解的根源之一。
本文将带你系统梳理裂图的各种原因、排查思路，并重点讲清楚混合内容的原理与浏览器行为。
一、什么是'裂图'？
'裂图'（broken image）是指浏览器尝试加载 <img> 标签的图片资源失败时的表现形式。常见表现包括：
- 图片区域显示为灰底、叉号或占位符；
- 控制台出现
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 响应头设置错误
- 如果返回头不是图片类型（例如
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）的资源。
<!-- 页面本身是 https://example.com -->
<img src="http://img.example.com/a.png">
