相信每个人都碰到过这种情况：

如果自己辛苦开发的产品，在线上遇到图片丢失等问题，导致图片裂开，会不会很难过？

使用占位图片

为了弥补图片加载失败时的用户体验，我们要使用占位图片。

也就是当想要加载的图片加载失败时，去加载其他图片。

就像这样：

虽然同样是没图片，但在视觉上给人的感受却比图像裂开要好得多。

实现这个需求很简单，img 元素有一个 onerror 事件，图像加载失败时，会触发这个事件。

<img src="/image.png" onerror="callback()" />

我们只需要在 callback 中重新设置它的 src 属性就可以了。

function callback() {
  this.src = '/placeholder.png'
}

处理加载占位图片死循环问题

很多讲解如何处理图片丢失的文章，基本上到这里就结束了。

但我想说的是，这种做法存在隐患。

如果替补图片，也就是 placeholder.png 同时也丢失了，那么它会继续触发 onerror 事件。会出现死循环，最终爆栈，页面崩溃。

所以还需要把 onerror 这个事件清除。

function callback() {
  this.src = '/placeholder.png'
  this.onerror = null
}

使用 Data URL

优化还没结束。

这时图片还是裂开的状态。

有什么办法可以保证占位图片始终都能被加载出来呢？

当然有办法！

使用 Data URL 协议。

Data URL 协议不同于 HTTP 协议那样可能会出现 404 之类的问题，它是用 base 64 对文件内容进行编码。访问 Data URL，就一定可以获取到内容。

然后我们只需要将 Data URL 作为占位图片就大功告成了！

下面是一个图片转 Data URL 的工具：

tool.chinaz.com/tools/imgto…

不过你可能还存在疑惑，Data URL 的体积并不小，放在 HTML 中会不会影响性能？

确实会，但也要分场景。在这个场景中问题并不大。

这就要对我们的占位图有一定要求了，我们可以使用纯色的矢量图来减少图片体积。

下面是一个可以直接生成纯色占位图片 Data URL 的工具：

placeholderimage.dev/

其实我们也可以期待 W3C 未来会给 img 标签提供一个 placeholder 属性，来专门处理这类问题。