当 HTTPS 页面尝试加载 HTTP 图片资源时，浏览器通常会阻止这些请求，原因是浏览器认为 HTTP 资源不安全。这种情况会导致图片无法显示。
示例问题
<img src="http://example.com/image.png">
在 HTTPS 页面中，上述代码会导致图片加载失败。
解决方案
1. 使用 upgrade-insecure-requests 策略
在页面的 <head> 中添加以下元标签，强制浏览器将 HTTP 请求升级为 HTTPS：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
注意：此方法仅适用于 HTTP 和 HTTPS 域名及路径完全一致的场景。
2. 将资源迁移到 HTTPS
将图片等静态资源上传到支持 HTTPS 的服务器，并使用 HTTPS 链接替换原有的 HTTP 链接：
<img src="https://example.com/image.png">
3. 使用反向代理
通过 Nginx 配置反向代理，将 HTTPS 请求转发到 HTTP 服务器：
server {
listen 443 ssl;
server_name example.com;
location /images/ {
proxy_pass http://http-server.com/images/;
}
}
4. 使用相对协议
如果资源同时支持 HTTP 和 HTTPS，可以省略协议部分，让浏览器根据当前页面协议自动选择：
<img src="//example.com/image.png">
5. 使用 iframe 嵌套加载
对于不支持 HTTPS 的资源，可以通过 iframe 嵌套加载：
<iframe src="http://example.com/image.html"></iframe>
通过以上方法，可以有效解决 HTTPS 页面无法加载 HTTP 图片的问题，同时提升页面的安全性和兼容性。
