发生错误时 HTML 后备图像

前几天我遇到了一些外部源图像无法加载的问题。

在这种情况下，我保存了某人 Twitter 头像的链接。当用户更改此头像时，它不会自动反映新的头像。

所以我决定研究一下备用图片。
结果出乎意料地简单。

我们想要实现的目标：

• 加载图像
• 如果未加载，则显示后备

注意：或者，您也可以决定删除图片

HTML 错误后备图像

让我们设置一个示例 HTML 实验。

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg"
/>

这将从Pexels（一个图片库网站）加载一张 Pixabay 的照片。

这将完美地工作，但现在让我们尝试通过在图像中随机添加一些数字来破坏它。

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
/>

这样，我们就得到了超级烦人的破碎图像。

那么发生这种情况时我们该怎么办？
我们可以使用onerror图像上的属性来设置后备。

它的工作原理如下：

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
  onerror="this.onerror=null; this.src='https://images.pexels.com/photos/159868/lost-cat-tree-sign-fun-159868.jpeg'"
/>

我们使用onerror来将错误设置为 null，并将图片的 src 设置为 fallback 值。
在我们的例子中，src 是一张走失的猫咪的照片。

注意：依赖外部镜像并非好习惯。理想情况下，您需要将备用镜像保存在本地文件系统中，以确保其可靠性。

你可以在下面的 CodePen 中看到它的实际效果。
第一张图片加载成功，但第二张图片加载失败。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。