介绍

在 HTML 中，图片可以使用两种方式来显示：<img> 标签和 <svg> 标签。但是，在使用这些标签时，有时会遇到无法加载对应图像的情况，本文将介绍 img 和 svg 标签未加载时的处理方法。

img 标签未加载处理

<img> 标签是在 HTML 中最为常用的图像标签之一，但是在网络较差或者图片链接错误的情况下，图片可能无法加载。那么，我们怎么才能让用户知道图片未加载呢？

alt 属性

可以通过设置 <img> 标签的 alt 属性来显示未能成功加载的图像信息。这是一种暂时替代图像的方法，用户可以看到图像所代表的信息。

<img src="image.jpg" alt="无法加载图像">

CSS

另外，我们还可以利用 CSS 来为未能加载的图像添加样式或表示：

img:not([src]) {
  border: 1px dashed red;
  width: 100px;
  height: 100px;
  background: #eee;
}

上述 CSS 代码表示当 img 标签的源地址不存在时，自动为其加上红色虚线边框、宽高均为 100px，背景颜色为浅灰色。这样，我们可以很清楚地得知哪些图像未被成功加载。

svg 标签未加载处理

与 <img> 标签不同，<svg> 标签通常被用来绘制方便的矢量图形，如果未能成功加载可能会导致页面布局上的缺陷，那么我们该如何处理未能成功加载的 <svg> 呢？

CSS

我们同样可以通过 CSS 来为未加载成功的 <svg> 提供占位符。示例如下：

svg:not(:defined) {
  border: 1px dashed blue;
  background: #eee;
  width: 100px;
  height: 100px;
}

当未能成功加载 <svg> 时，自动为其加上蓝色虚线边框，背景颜色为浅灰色，宽高均为 100px。

总结

当 <img> 和 <svg> 标签未成功加载时，我们可以利用 alt 属性以及 CSS 来为其提供占位符或者提示信息，保证页面不会因为加载失败而出现大范围的布局缺陷。