html图片加载不出来

我蹲在电脑前，图片盯着那个永远转着圈的加载小图标，心里骂了句脏话。不出图片又没加载出来。图片

这破事从2005年我做第一个网页就遇上了，加载到现在2024年，不出居然还在发生。图片技术上早就不是加载问题——5G都普及了，光纤都进村了，不出可一张几十KB的图片JPG就是能在你眼前装死。

最常见的加载凶手是相对路径写错。你写<img src="images/photo.jpg">，不出但你的图片HTML文件在根目录，图片在子目录的加载再子目录里。浏览器按你给的不出地址找过去，扑了个空。这种错误我犯过不下二十次，每次都是盯着代码看了半天，最后发现少打了一个斜杠。

还有那种偷懒的写法，src="./img/1.png"，看着没毛病对吧？可你要是把HTML文件挪了个位置，或者图片被重命名了，照样白屏。我有个朋友做电商页面，产品图全是外链的图床URL，某天图床服务商跑路了，整站商品图全变红叉。他那天抽了半包烟。

但真正让人抓狂的是那些“时好时坏”的情况。你刷新一次能显示，再刷新就没了。这时候八成是网络问题——运营商DNS抽风，或者你用了什么不靠谱的CDN。我住的小区宽带就这德行，晚上八点高峰时段，图片加载成功率能有七成就不错了。你拿手机流量试，秒开；切回WiFi，又卡死。气得你想把路由器从窗户扔出去。

还有一种隐蔽的坑：图片格式。老浏览器不认WebP，你偏要用，结果Chrome里好好的，用户用IE一打开，全白。现在都2024年了，还有人用IE？有，真有。我上个月帮一个政府网站修bug，后台数据显示还有百分之零点几的访问来自IE11。你说这找谁说理去。

最操蛋的是那种“图片本身坏了”的情况。文件后缀是.jpg，你用记事本打开一看，里面写的是“This is not a real image”。有些工具下载图片会给你存个假文件。这种错误最耗时间，因为你检查路径没错、网络没错、格式没错，最后发现是源头文件就是坏的。

对了，还有个容易忽略的：CSS样式干扰。你给img设了display: none，或者父元素宽度为0，图片其实加载成功了，但就是不显示。我见过一个新手，调试了半天，最后发现是某个全局样式把图片的max-width设成了0。那感觉，就像你钥匙明明在口袋里，却翻遍了整个房间。

说这些不是要给你列清单。我是想说，图片加载不出来这件事，永远不是单一原因。它像生活里那些糟心事——你以为是A出了问题，排查到最后发现是B和C联手坑你。有时候你运气好，清一下缓存就好；有时候你得把代码翻个底朝天，最后发现是服务器那边少了个响应头。

我现在的习惯是，写完代码先开开发者工具看Network面板。图片红了就点一下看状态码——404是路径问题，500是服务器问题，200但图片不显示那就是渲染层的事。这招帮我省了不少时间，但说实话，每次看到那个红色状态码，我还是会心头一紧。

图片加载不出来，这事看着小，但能把你一天的耐心都磨光。就像你急着给朋友发一张搞笑图，结果那边死活收不到，你这边还在傻乎乎地等那个转圈图标停下来。到最后你放弃了，关了页面，心想：算了，不看了。

可下一张图片，你还是得加载。