在Web开发中，当我们将站点迁移到HTTPS协议后，经常会出现部分图片无法正常显示、显示位置错乱或者加载不全的情况，这类问题绝大多数都是由混合内容导致的。混合内容指的是在HTTPS协议的页面中，加载了HTTP协议下的资源，浏览器为了保障用户的数据安全，会对这类非加密的资源加载行为进行限制，最终引发图片显示异常的问题。
混合内容的分类与影响
混合内容主要分为两类，不同类型对图片加载的影响程度有所区别：
- 被动混合内容：指图片、音频、视频等不会修改页面核心逻辑的资源，这类资源被浏览器拦截后，通常会导致图片不显示，但页面其他功能仍可正常使用。
- 主动混合内容：指脚本、样式表、iframe等资源，这类资源被拦截后可能会导致页面功能完全失效，不过图片加载问题大多和被动混合内容相关。
问题排查方法
要快速定位图片显示不一致的原因，可以通过以下步骤排查：
1. 浏览器控制台检查
打开浏览器的开发者工具，切换到控制台面板，查看是否有混合内容相关的报错提示，通常报错信息会明确标注被拦截的HTTP资源地址。
2. 页面资源遍历
检查页面中所有图片的引用地址，确认是否存在HTTP开头的图片链接，尤其是动态生成的图片地址和第三方图床的链接。
具体解决方案
1. 替换资源协议为HTTPS
最直接的解决方式是将所有HTTP协议的图片地址替换为HTTPS协议，如果对应的资源服务器支持HTTPS访问，直接修改协议头即可。
如果是静态资源，可以直接修改代码中的引用地址，示例代码如下：
<!-- 修改前 --> <img src="http://ipipp.com/image/example.jpg" alt="示例图片"> <!-- 修改后 --> <img src="https://ipipp.com/image/example.jpg" alt="示例图片">
2. 使用相对协议引用资源
如果不确定资源是否同时支持HTTP和HTTPS，可以使用相对协议的方式引用图片，浏览器会自动根据当前页面的协议来请求资源。
相对协议的写法是不写协议头，直接以双斜杠开头，示例代码如下：
<img src="//ipipp.com/image/example.jpg" alt="示例图片">
3. 配置内容安全策略（CSP）
可以通过配置CSP头来自动升级混合内容，让浏览器自动将HTTP的资源请求升级为HTTPS请求，避免手动修改所有资源地址。
在服务器的响应头中添加如下配置：
# Nginx配置示例 add_header Content-Security-Policy "upgrade-insecure-requests";
如果是前端项目，也可以在页面的<head>标签中添加meta标签实现同样的效果：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
4. 动态资源地址处理
如果图片地址是后端动态返回的，需要让后端在返回地址时自动判断当前请求的协议，或者统一返回HTTPS协议的地址，避免返回HTTP地址。
以Node.js后端为例，动态处理图片地址的代码如下：
// 处理图片地址，自动补充协议
function formatImageUrl(url, req) {
// 如果地址已经是https或者相对协议，直接返回
if (url.startsWith('https://') || url.startsWith('//')) {
return url;
}
// 如果是http协议，替换为https
if (url.startsWith('http://')) {
return url.replace('http://', 'https://');
}
// 如果是相对路径，拼接当前请求的协议和域名
const protocol = req.protocol === 'https' ? 'https' : 'https';
const host = req.get('host');
return `${protocol}://${host}${url}`;
}
验证方案有效性
完成修改后，需要再次打开浏览器开发者工具，切换到网络面板，查看所有图片的请求协议是否都为HTTPS，同时确认控制台没有混合内容相关的报错，页面所有图片都能正常加载显示，即可确认问题已经解决。