当img标签中的src图片加载失败时，怎么让它变得更美观呢？

当 <img> 标签中的 src 图片加载失败时，几种方法可以使其更美观：

1. 使用 onerror 属性:

这是最常用的方法。onerror 属性允许你在图片加载失败时执行一段 JavaScript 代码。通常，我们会将 src 替换为一个默认图片。

<img src="image.jpg" onerror="this.onerror=null; this.src='placeholder.jpg';" alt="My Image">

这段代码尝试加载 image.jpg。如果加载失败，onerror 事件触发，将 src 更改为 placeholder.jpg。this.onerror=null; 这句很重要，它可以防止无限循环的错误，尤其当占位图也加载失败时。

2. 使用 <picture> 元素和 source 元素 (推荐):

<picture> 元素允许你定义多个图像源，浏览器会根据不同的条件（例如屏幕分辨率、设备类型等）选择最合适的图像。结合 onerror，可以实现更优雅的回退方案。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="placeholder.jpg" alt="My Image">
</picture>

浏览器会优先尝试加载 WebP 格式的图片，如果浏览器不支持 WebP，则会尝试加载 JPEG 格式的图片。如果两者都失败，则会显示 placeholder.jpg。这个方法不需要 onerror，因为 <img> 标签作为兜底方案。

3. CSS 样式:

你可以使用 CSS 样式来控制图片加载失败时的外观。

设置背景颜色/图片: 可以为 <img> 元素设置背景颜色或背景图片，这样在图片加载失败时，至少会显示一个纯色背景或默认背景图片。

img {
  background-color: #f0f0f0; /* 或 background-image: url("placeholder.jpg"); */
}

使用伪元素 ::before 或 ::after: 可以利用伪元素在图片容器内添加一些提示信息，例如 "图片加载失败"。

img {
  position: relative;
  display: block; /* 或者 inline-block */
}

img::after {
  content: "图片加载失败";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

img:not([src])::after, /* src 属性为空 */
img[src^="data:,"][src$="base64, "]::after, /* base64 图片为空 */
img[src=""]::after, /* src 属性值为空字符串 */
img:invalid::after { /* 图片加载失败 */
  display: block;
}