网页图片有的显示有的不显示

我上周给客户改一个企业站，网页后台明明传了二十张产品图，图片前台刷新出来就十七张。显示剩下三张的不显位置空着，灰蒙蒙的网页破图标戳在那儿，像掉了牙的图片嘴。

F12打开控制台，显示红字一片。不显404、网页403、图片混合内容警告，显示什么妖魔鬼怪都有。不显网页图片显示不显示，网页说白了就三类原因：路径错了、图片权限不够、显示协议不通。

路径错是最蠢的错。我见过有人把图片放在`/images/`目录，代码里写的却是`img src="img/logo.png"`，少个s，图就没了。还有更隐蔽的，Linux服务器区分大小写，`Pic.jpg`和`pic.jpg`是俩文件，本地Windows上跑得好好的，一上服务器全崩。这种错误查起来最费时间，因为代码看着没问题，图片文件也确实存在，就是差一个字母的大小写。

权限问题也常见。服务器上图片文件权限设成600，只有root能读，网页访问自然被拒。一般设成644就够，目录要755。你要是用宝塔面板或者虚拟主机，上传文件后权限自动配好，但命令行部署的话，很容易忽略这茬。

混合内容这个坑，现在依然存在。页面是`https://`，图片地址却写死成`http://`，浏览器直接拦下——尤其Chrome，干脆不显示，连个破图标都不给。我去年给一个老客户改版，对方网站还是http，但全站代码里图片路径全带http前缀，我改成https后图片全挂。后来写了个脚本批量替换，才救回来。

还有一种情况，图是懒加载的。`loading="lazy"`属性写对了，但图片在首屏上方，滚动不到就不触发加载。或者JS里用了IntersectionObserver，但代码有bug，某些图片永远进不了视口。这问题在移动端特别明显——有时候你滑快了，图片还没来得及加载就过去了，再滑回来才显示。

缓存也捣乱。浏览器缓存了旧的HTML，里面引用的是已经删掉的图片路径，刷新几次都还是旧的。这时候Ctrl+F5强制刷新，或者直接无痕窗口打开，问题就暴露了。

最后说个冷门的——图片格式。WebP格式现在普及度高，但有些老浏览器不认，直接白屏。我一般会做兼容处理，``标签里放俩源，一个WebP一个PNG，浏览器自己挑能显示的。

排查思路其实很简单：先看控制台报错，是404还是403还是混合内容；再右键点破图图标，选“复制图片地址”，浏览器单独打开看能不能访问；能访问就是代码问题，不能访问就是服务器问题。八成问题十分钟内能定位。

要是图片有时显示有时不显示，那多半是网络抖动或者服务器带宽不够，加载超时了。这种最烦，因为不是稳定复现，只能看服务器日志碰运气。

网页图片不显示不是玄学，每一步都有迹可循。你按路径、权限、协议、懒加载、缓存、格式这六个方向查一遍，基本能解决。真解决不了，把控制台报错截图发我，我帮你看看。