网站上线后，图片是最容易出问题的内容之一。文字通常存在数据库里，发布时不容易丢；图片却要同时依赖文件位置、链接写法、服务器配置和外部平台，任何一环变化都可能让页面出现空白框或裂图。下面按常见现象、原因和检查顺序来说。
图片完全不显示，先看浏览器控制台
打开出问题的页面，按 F12 打开开发者工具，切到 Network（网络）面板，刷新页面，看图片请求的状态码。常见的几种情况：
- 404：文件确实不在这个地址上，多半是路径写错或图片没上传。
- 403：文件存在但服务器不允许访问，常见于目录权限设置或防盗链规则。
- 混合内容警告：页面是 HTTPS，图片却用 http 开头，浏览器会拦截。
- 请求被取消或超时：图片文件过大，或外链服务器响应慢。
状态码能帮你快速把问题缩小到某一类，比反复重新上传更有效。
上线迁移后图片失效：路径变了，引用没变
旧站改版或换服务器时，图片文件往往被重新组织到新的目录结构里，但文章正文里的图片链接还是旧地址。表现为：首页和列表页正常，点进旧文章图片全是裂图。
处理顺序建议是：
- 从后台导出全部文章，把正文里的图片链接提取出来，形成一份旧链接清单。
- 把旧链接和新服务器上的实际文件路径做对照，找出对不上的部分。
- 能保留旧目录结构的就保留；不能保留的，在服务器上配置跳转，把旧图片地址指向新地址。
- 跳转只作为过渡，正文里的链接最好逐步替换成新地址，避免以后再次迁移时又断一次。
如果网站图片数量多，这一步值得用脚本或批量替换工具处理，人工逐篇改容易漏。
大小写和中文文件名导致部分图片打不开
有一类问题很隐蔽：同一张图，在编辑电脑上能看，在服务器上就是 404。常见原因是文件名大小写不一致。Windows 系统对文件名大小写不敏感，Linux 服务器敏感，Banner.jpg 和 banner.jpg 会被当成两个文件。
另一种情况是文件名里带中文或空格。部分服务器和 CDN 对这类字符的处理方式不同，链接在复制、粘贴、转码过程中容易变形。
建议上传前就统一命名规则，例如：
- 只用小写英文字母、数字和短横线。
- 用短横线代替空格，不用下划线混用。
- 名称体现内容，便于团队检索，例如
service-consulting-01.jpg。 - 同一栏目的图片放在同一目录下，避免全部堆在根目录。
外链图片失效：别人的图不是你的图
有些运营人员图省事，直接从其他网站复制图片地址，粘贴到自己的文章里。这类外链图片有几个风险：对方删除或更换图片后，你的页面就出现裂图；对方开启防盗链后，你的网站无法加载；对方服务器不稳定时，页面加载速度受影响。
判断方法很简单：在浏览器里单独打开这个图片地址，看是否还能访问。如果图片对内容重要，建议下载后上传到自己的服务器或图床，再替换链接。引用外部图片时也要注意版权，不要随意使用来源不明的素材。
HTTPS 页面加载 http 图片
网站启用 HTTPS 后，如果图片链接还是 http 开头，浏览器会把它当作不安全内容拦截，页面出现裂图或安全提示。这类问题常见于早期上传的图片、从旧站复制过来的正文，以及第三方统计或广告代码里的图片。
检查方法：在开发者工具控制台里搜索 “Mixed Content”，或直接查看页面源码里的图片地址。处理方式是把图片地址改成 https，或者把图片下载到自己的 HTTPS 域名下。如果图片来自外部平台，先确认对方是否支持 https。
图片能打开但显示异常：尺寸、格式和压缩问题
链接正常、状态码 200，但图片显示变形、模糊或只显示一部分，通常和链接无关，而是图片本身的问题：
- 图片实际尺寸和页面预留位置不匹配，被拉伸或裁切。
- 格式不被浏览器支持，例如某些特殊格式在部分浏览器上无法显示。
- 图片经过过度压缩，细节丢失。
- 图片文件过大，加载慢，用户看到的是空白占位。
这类问题要在上传前控制：按页面实际展示尺寸准备图片，不要用一张大图靠代码缩小；需要透明背景用 PNG，照片类内容用 JPG 或 WebP；单张图片控制在合理大小，列表页和详情页可以分别准备不同尺寸。
图片链接的日常检查清单
网站上线不是终点，图片链接会随着内容更新、服务器调整和外部平台变化而失效。建议把下面几项纳入日常检查：
- 新文章发布前，在预览页逐张点开图片，确认能正常显示。
- 改版或迁移后，抽查旧文章里的图片，尤其是发布时间较早的内容。
- 定期检查使用了外链图片的页面，确认外部地址仍然有效。
- 检查图片文件名和目录结构是否仍然符合团队命名规则。
- 备份图片文件时，连同文章正文里的链接一起备份，避免只备份文件却不知道哪篇文章在用。
图片链接问题大多不是技术难题，而是维护习惯问题。把命名规则、上传流程和检查节点固定下来，比出问题后再逐张修复省力得多。
