速查在线工具箱网站换成 HTTPS 后图片和样式怎么丢了？
页面是 HTTPS，但里面的资源还在用 HTTP 加载，现代浏览器会直接拦掉一部分。
先分清两类。能改写页面的资源（脚本、样式表、iframe、异步请求）叫主动混合内容，安全风险等同于注入，现代浏览器从 2020 年起的版本会直接阻止。图片、音频、视频属于被动混合内容，本身不能改写页面，浏览器会尝试自动升级到 HTTPS；如果那个地址没有 HTTPS 版本，请求就失败，表现成断图或排版塌掉。
一个特别容易误导人的现象是：主动内容被静默阻止后，地址栏的锁图标可能还在，因为「那些坏资源根本没加载」。所以判断不能只看锁，要看开发者工具的 Issues 面板。修复顺序是先找出所有硬编码的 HTTP 地址（CMS 数据库里存的绝对地址是重灾区），改成相对地址或 HTTPS，最后才用策略里的升级指令做过渡兜底。
站点全面上了 HTTPS，大部分页面正常，偏偏几张老图不见了、某个页面的样式全塌了。回滚 HTTPS 显然不划算，问题其实只出在地址写得不一致。
这类问题的排查很机械：看开发者工具、列清单、逐个替换。真正需要理解的是哪些会被拦、哪些会被自动升级——这决定你的修复优先级。
1哪些会被拦，哪些会被升级
按资源类型区分对待，修复顺序据此排定。
| 资源类型 | 分类 | 浏览器行为 |
|---|---|---|
| 脚本文件 | 主动混合内容 | 直接阻止，页面功能可能整块失效 |
| 样式表 | 主动混合内容 | 直接阻止，这就是「样式全丢」的典型原因 |
| iframe 页面 | 主动混合内容 | 直接阻止，内嵌内容整体空白 |
| 异步请求与接口 | 主动混合内容 | 请求被拦，控制台有报错，业务逻辑静默失败 |
| 图片 | 被动混合内容 | 自动升级到 HTTPS；无 HTTPS 版本则加载失败 |
| 音频与视频 | 被动混合内容 | 同图片，自动升级或加载失败 |
| WebSocket 连接 | 主动混合内容 | 明文连接被拦，必须改用加密连接 |
锁图标可能还在：主动内容被静默阻止后，页面「显得安全」只是因为坏资源没加载。判断要靠开发者工具的 Issues 面板，而不是看锁。
2修复顺序
从源头改起，别只依赖浏览器兜底。
- 先全站搜一次明文地址
- 在模板、样式、脚本里检索 http 开头的资源引用，重点找出写在属性里的那些。
- 再查数据库里的内容
- 内容管理系统把绝对地址存在文章正文里，只在模板里改是治不好的，需要批量替换。
- 改成相对地址或显式 HTTPS
- 同站资源用相对路径最省事；跨站资源直接用 https 开头的完整地址。
- 最后加过渡指令
- 策略里的升级指令能让浏览器在发请求前把明文改成加密，作为过渡期的安全网，但不是修复。
- 补上强制加密
- 确认没有遗留明文依赖后，再启用强制加密响应头，把后续访问全部导向加密通道。
3别忽略的连带影响
混合内容影响的远不止「几个资源加载不出来」。
- 站点级安全判定
- 只要有页面带混合内容，整站的加密状态判定就会失败，而不只是那一个页面。
- 离线能力失效
- 服务工作线程要求页面完全安全，混合内容会让离线与安装相关的能力直接不可用。
- 自动升级不等于修复
- 升级指令只在浏览器侧动手，原地址里没有 HTTPS 版本的资源依然加载不出来。
- 老内容同样会被算账
- 一篇十年前的文章里残留的一个明文图片地址，今天依然会触发警告。
顺着这个问题往下用
全部工具总览 →相关疑问
为什么锁图标还在，开发者工具却报混合内容？
因为被阻止的是主动混合内容，浏览器在它执行前就拦下了，页面「看起来」是完整的加密会话。锁图标只反映主文档的连接方式，不反映所有子资源的加载结果，所以必须以开发者工具的 Issues 面板为准。
升级指令能替代逐个改地址吗？
不能。它只是在浏览器发请求前把明文地址改成加密地址，属于过渡兜底。如果目标资源根本没有加密版本，改完之后请求依然失败，用户看到的还是断图或缺样式。
图片丢失和样式丢失是同一类问题吗？
不是。样式表属于主动混合内容，会被直接阻止，表现为样式整体失效；图片属于被动混合内容，通常会被自动升级，只有升级失败时才变成断图。排查时按这个分类排优先级，先修主动的。
怎么快速找出所有混合内容？
打开开发者工具的 Issues 面板，逐页访问一次即可列出具体资源与限制状态；同时用全站检索找代码和数据库里的明文地址，两边对照，避免遗漏只在个别页面出现的引用。
继续看：相关问题与资料
全部问题解答 →内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-09。若发现错误，欢迎通过页脚反馈入口告知。