公司设计发来一张产品渲染图，不开我双击，不开屏幕中央弹出一个白色方块，不开里面有个裂开的不开图片图标。img打不开。不开这破事一个月能遇上七八回，不开每次都得绕道走流程，不开烦得要命。不开

浏览器里直接报错，不开控制台红字一片。不开我瞄了一眼，不开404。不开文件路径写错了？不开还是服务器上文件根本没传上去？设计那边信誓旦旦说传了，我FTP一登，不开发现文件夹里躺着个同名但后缀是不开.PNG的文件，大写。Linux服务器不认大小写，img标签里写的是小写.png，自然找不到。

这算好解决的。更恶心的是那种图片文件本身没坏，但加载出来是张灰蒙蒙的破图，或者干脆转圈转半天。我遇到过最离谱的一次，客户网站首页banner图，img标签src指向一个外链图床，图床挂了，整页就剩个空白框。客户电话打过来，问我网站是不是被黑了。我解释半天，人家听不懂什么叫“第三方资源不可控”。最后我把图下载下来传到自家服务器，问题解决。

还有种情况，img打不开纯粹是格式兼容问题。WebP格式现在很流行，体积小画质好，但某些老浏览器不认。我手头有个项目，用户用IE11访问，产品图全挂。IE这玩意儿早该进坟墓了，但客户那边内部系统强制用，没辙。我最后用标签写了两套源，一套WebP一套JPEG，才算把人打发走。

说到图片路径，这里头门道多。相对路径容易出幺蛾子，尤其页面在子目录里，你写个，结果图片在根目录的images下，路径对不上，直接404。我吃过这亏，后来学乖了，要么用绝对路径，要么用模板引擎的根路径变量。写代码的人自己心里得有数，别总指望别人帮你排查。

还有一种情况，图片本身没毛病，但加载顺序出问题。页面结构里img标签写在某个异步加载的容器里，容器还没渲染完，图片就请求了，结果DOM节点被替换，图片请求被取消。这种bug最难查，因为刷新一下可能就好了，但用户那边就是偶发。我碰到过一次，最后用懒加载插件，给img加了个data-src属性，等容器稳定了再触发加载，才算根治。

话说回来，img打不开有时候真不是技术问题。有回同事说图片显示不了，我过去一看，他电脑上装了个广告拦截插件，把图片当广告给拦了。关掉插件，图片立马出来。这种事儿你上哪儿说理去？用户环境千奇百怪，你永远猜不到对面屏幕上到底发生了什么。

解决img打不开，核心就三步：先看网络请求通不通，再看文件存不存在，最后看格式认不认。但实际操作起来，每一步都可能藏着坑。我现在的习惯是，写img标签的时候，顺手加个onerror处理，给个占位图，至少别让用户看到一片空白。至于那些玄学问题，只能遇到一个拆一个，拆多了就长记性了。