网站图片加载不出来，网站大多数时候不是图片网速问题，而是加载你根本没给浏览器一个它愿意去取图的理由。

上个月我帮朋友排查一个个人博客，不出后台图片路径写的网站是 images/header.jpg，但文件实际放在 assets/img/header.jpg。图片浏览器按着路径去找，加载扑了个空，不出自然显示一片灰。网站这种低级错误，图片比你想的加载常见得多——我见过有人把文件名写成全角冒号，见过图片后缀是不出 .JPG 而代码里写小写 .jpg，在 Linux 服务器上，网站大小写敏感，图片直接404。加载

但路径错了还算好查。真正让人抓狂的是那种“有时能显示，有时不能”的情况。去年我维护一个电商活动页，用户反馈商品图随机打叉。打开控制台看，报错是 ERR_CONTENT_LENGTH_MISMATCH——服务器返回的图片数据不完整。查了半天，是 CDN 回源时超时，源站图片太大，压缩又没做好。一张3MB的摄影图直接扔上去，移动端加载到一半断了，页面就给你留个破图标。

还有一类隐蔽问题：图片被防盗链拦了。你从别的站直接复制图片链接，对方服务器检查 Referer 头，发现不是自家域名，就返回一张403或者一张透明的1x1像素图。表面看是“加载不出”，其实是对方故意不给你。这种情况在扒别人素材时尤其常见，我自己也踩过坑——当时还以为是网络波动，刷新了七八遍，最后用 curl 试了下才明白。

另外，别忽视懒加载的副作用。现在很多前端框架默认给图片加 loading="lazy"，初衷是省流量。但如果你把首屏关键图也设成懒加载，或者懒加载的触发条件写错——比如滚动容器不是 window 而是某个内部 div——图片就可能永远不加载。我调试过一个后台系统，侧边栏的图标死活不出来，后来发现是那个 div 的 scrollTop 判断有问题，图片在可视区内却一直没被“唤醒”。

最容易被忽略的其实是格式兼容。WebP 格式压缩率高，但 Safari 老版本不支持。如果你只给一张 .webp 的图，没写 <picture> 标签做降级，苹果用户看到的就是一片空白。我见过一个摄影作品站，全站用 WebP，结果 iPhone 用户访问时头图位置是空的——站长自己用安卓，压根没发现。

排查思路其实就一句话：先看控制台报什么错，别瞎猜。404 是路径或文件名问题，403 是权限或防盗链，ERR_CONNECTION_RESET 可能是服务器或防火墙，NS_BINDING_ABORTED 在 Firefox 里多半是图片被中断。如果控制台干净但图还是不显示，右键“在新标签页中打开图片”，看它单独能不能出——能出，说明是页面里的 CSS 或 JS 在捣乱，比如 display: none 没去掉，或者某个元素盖住了图片区域。

别一上来就怪网络。你刷新十次不如按一次 F12。