图片加载不出来，网站九成不是开图网站挂了，而是网站图片链接本身出了问题。

上周帮朋友看他的开图个人博客，首页大图位置一片空白，网站浏览器控制台里躺着一行红字：GET https://oldsite.com/images/hero.jpg 404 (Not Found)。开图他以为服务器炸了，网站折腾半天重启Nginx，开图结果问题出在他三个月前换域名时，网站文章里的开图图片地址还是写死的旧域名。旧域名早就停止解析了，网站图片自然拉不出来。开图

这种情况太常见了。网站很多人判断“网站打不开图片”第一反应是开图网速慢、服务器崩了，网站但打开开发者工具一看，Network面板里图片请求要么返回404，要么被CORS策略拦截，要么直接超时。不同的错误码指向完全不同的原因，盲目重启服务器基本没用。

先说最直白的一类：图片路径写错了。相对路径和绝对路径混用是重灾区。比如页面在/blog/post/下面，图片写src="images/photo.jpg"，浏览器会去/blog/post/images/photo.jpg找，但图片实际放在/static/images/。路径差一层，图片就没了。更隐蔽的是大小写问题——Linux服务器上Photo.jpg和photo.jpg是两个文件，本地Windows开发时没事，一部署就全挂。

另一类高频问题是跨域。图片放在CDN或者图床上，域名和主站不同。如果服务端没配Access-Control-Allow-Origin，浏览器会直接拦截。注意，这种拦截在标签里通常不会报CORS错误，图片就是单纯不显示。但如果你用fetch或者canvas去加载，控制台就会明确告诉你跨域了。我见过一个案例，设计师把图片传到阿里云OSS，没开跨域规则，前端用canvas做裁剪功能，图片死活渲染不出来，查了一下午。

还有一种容易被忽略的情况：混合内容拦截。网站是HTTPS的，图片链接却是HTTP。浏览器出于安全策略，会直接阻止HTTP资源加载。Chrome地址栏会显示一个灰色的小盾牌图标，点开能看到“已阻止不安全的内容”。这个提示很不起眼，但杀伤力极大——整站图片全灭，页面布局直接塌掉。解决办法要么把图片迁到HTTPS，要么用协议相对URL（//example.com/img.jpg），但后者现在也不推荐了。

服务器层面的问题也有，但比例没那么高。比如图片目录权限设成了700，Nginx进程读不到文件，返回403。或者磁盘满了，新上传的图片写不进去，旧图片倒是能显示。再比如CDN缓存了404响应，你明明修好了源站，用户那边还是打不开，得手动刷新CDN缓存。这些情况用curl -I直接请求图片URL就能快速定位，返回头里的状态码比瞎猜靠谱得多。

说个我自己的习惯：遇到图片打不开，先按F12，切到Network面板，勾上“Img”过滤器，刷新页面。看哪个请求飘红，点进去看Status Code和Response Headers。404查路径，403查权限，CORS查响应头，超时查网络或CDN。这套流程走下来，八成问题五分钟内能定位。剩下的两成，多半是浏览器缓存或者Service Worker在捣乱，开无痕窗口再试一次就能排除。

图片加载这件事，表面看是“打不开”，底层牵扯到路径解析、跨域策略、协议安全、缓存机制、服务器配置。每个环节都可能断链。别急着甩锅给“网站坏了”，打开控制台，答案通常就在那里。

(责任编辑：百科)