网页图片裂开无法加载的图片

浏览器标签页上转着圈圈，网页无法图片区域灰蒙蒙一片，图片中间一个小图标，裂开裂开的加载相框，或是网页无法破碎的图片轮廓。你盯着它，图片等了三秒，裂开又三秒，加载还是网页无法没动静。刷新，图片没有用。裂开换个网络，加载还是网页无法不行。那张图片大概是图片真的没了。

这事儿太常见了。裂开我自己的博客后台就躺着一张裂了的图，那是一张去年拍的照片，拍的是楼下便利店门口晒太阳的橘猫。当时随手插进文章里，也没备份原图，后来图床服务商跑路了，那张猫的照片就永远变成了一个破碎的图标。点开审查元素，能看到 <img src="http://old-image-host.com/cat.jpg">，但那个域名已经指向一个卖二手手机的页面了。

图片加载失败，本质就三种原因：文件不存在了，路径写错了，或者网络压根没把数据传输完。第一种最常见，服务器上文件被删、被移动、存储过期，就像我那张猫。第二种是开发者的锅，相对路径和绝对路径搞混，或者文件名大小写对不上，Windows服务器上不区分大小写，Linux上区分，一换环境就裂。第三种比较隐蔽，CDN节点出问题，或者用户网络太差，图片文件大，传输中断，浏览器干脆放弃渲染。

你可能会想，一张图片而已，碎了就碎了，影响不大。但真不是。电商网站上商品图裂了，用户直接关页面走人。新闻网站配图裂了，读者会觉得这网站不靠谱。更别提那些用图片做导航按钮的页面，裂了之后整个布局都塌了，文字叠在一起，惨不忍睹。

我见过一个挺有意思的处理方式。有个国外的技术博客，给所有图片都加了 onerror 事件，一旦加载失败，就替换成本地生成的SVG占位图，上面写着“这张图本来想给你看个好东西，但它跑了”。比默认的破碎图标友好多了。还有个网站更绝，图片裂了之后自动抓取页面的第一个文字段落，生成一张纯色背景的文字卡片，视觉上居然不违和。

但这都是补救。真正靠谱的做法是别让图片依赖单一来源。要么把图片存在自己的服务器上，做好备份；要么用多个图床做冗余，主图挂了自动切备用地址。前端代码里也要写 alt 属性，别小看这玩意儿，图片加载不出来的时候，至少还有文字能告诉用户这里原本是什么。我见过不少开发者偷懒，alt直接写个“图片”俩字，等于没写。

还有一种情况容易被忽略——懒加载。现在很多页面用 loading="lazy" 让图片滚动到可视区域才加载，这本身没问题，但如果你把懒加载和错误的判断逻辑写在一起，比如用JavaScript检测图片高度为0就认为加载失败，那在图片还没开始加载的时候就会误判，直接显示裂图。我调试过这种bug，折腾了半天，最后发现是代码里 offsetHeight 在图片未加载时返回0导致的。

最后说个玄学，有些时候图片裂了，刷新一下就好，但刷新几次都不行，过半小时再打开又好了。这大概率是CDN边缘节点缓存失效，回源拉取时源站临时报错。这种问题你没法控制，只能等CDN自己恢复。所以别太焦虑，该裂的图总会裂，能做的就是让裂的时候别太难看。

很赞哦!（47）