HTML img alt属性实现图像加载失败占位文本

许多开发者误以为 alt 属性仅仅是图片加载失败时用于展示的备选文本，但实际上，它首先是一个服务于无障碍语义的属性——专门为屏幕阅读器提供文字说明，而非供肉眼直接查看。浏览器在默认情况下绝不会将 alt 文本渲染到页面上，除非你主动借助 CSS 或 JavaScript 将其呈现出来。

Alt 属性并非 fallback 机制，它不介入加载失败的处理流程

经常有开发者提出疑问：“图片无法显示时，alt 文本为什么没有出现？” 这里需要澄清一个关键认知：alt 实际上并不参与图片加载失败时的“错误处理”。它仅仅是为辅助设备提供文字描述。浏览器在渲染过程中，即便 src 指向的图片资源根本不存在，也会将 alt 内容传递给读屏软件，但在视觉层面——默认是看不见的。除非你主动编写样式或监听加载状态，否则用户只能看到一个空白的占位区域。真正意义上的“占位文本”需要你通过样式干预或加载状态监听来实现，而非依赖浏览器自动完成。

让 alt 文本在图片加载失败时可见的 CSS 实现方案

那么，如何让 alt 文本在图片加载失败时显示出来呢？一种轻量级的方法是使用 CSS 伪元素。现代浏览器对于加载失败的 会保留 DOM 元素，但其尺寸会坍缩（宽高变为 0），同时呈现一个带边框的“缺失图标”。此时，可以结合 alt 属性值与 ::after 伪元素来实现视觉上的占位效果。需要注意的是：伪元素在 上生效需要满足两个条件——元素必须拥有显式的宽高（建议使用 width/height 或 aspect-ratio），并且设置了 position: relative；否则伪元素可能会脱离文档流或根本无法显示。

img {
  position: relative;
}
img::after {
  content: attr(alt);
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #f5f5f5;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
img:not([src]), img[src=""], img[src*="data:"], img[src^="http"]:not([src*="//"]) {
  /* 强制触发 ::after，比如空 src、无效协议、本地路径错误 */
}
img[src]:not([src^="http"]):not([src^="/"]):not([src^="./"]):not([src^="../"]) {
  /* 可选：拦截明显非法 src 值 */
}

这段 CSS 的核心思路是：利用 content: attr(alt) 将 alt 文本注入到伪元素中，再配合绝对定位使其覆盖整个图片区域。但需要注意的是，如果图片本身没有宽度或高度，伪元素将会消失，因此务必为 设定明确的尺寸。

更稳健的方案：使用 onerror 事件替换为纯文本节点

CSS 方案虽然轻量，但其局限性也比较明显——它依赖于布局宽高，并且无法处理图片被完全移除 DOM 的情况。如果确实希望实现“图片未加载就显示文字”，onerror 事件才是原生且可靠的方式。它能够准确捕获加载失败，但需要注意：不要仅仅在 onerror 中修改 alt 属性，因为文本依然不会显示出来。推荐的做法是：移除 ，插入一个

并将 alt 内容写入其中。此外，一定要防止重复触发——可以通过标记（例如 data-loaded="false"）来锁定回调，避免出现雪崩效应。

示例：

为什么不能依赖浏览器的默认 fallback 行为

不同浏览器对加载失败图片的 UI 处理方式差异很大：Chrome 会显示一个小图标加“×”，Safari 留下一片空白，Firefox 有时连边框都不绘制。而 alt 文本始终只对辅助技术有效，绝不会作为视觉 fallback 自动渲染。如果你没有编写 CSS 或 JS 进行处理，用户看到的将是一片空白或奇怪的图标——尤其是在移动端或低分辨率屏幕上，根本无法辨认哪里本该有图片。

因此，要真正解决“占位”问题，需要根据具体场景明确选择路径：CSS 覆盖（轻量但受限于布局）、JS 替换（可控但增加执行开销）、或服务端预检（例如使用 HTTP HEAD 验证资源是否存在，成本较高）。没有万能的解决方案，关键在于你的项目是否允许 JS 执行、是否要求 SEO 友好、是否需要支持无样式环境。从实践经验来看，大多数场景推荐使用 onerror 配合 DOM 替换，因为它在所有浏览器中行为一致，并且能够完全控制呈现效果。