alt文本加载失败时不显示，是因为浏览器默认仅在禁用图片或无障碍场景下使用alt，而非渲染为可见文字；需通过css ::after（要求img有宽高、position: relative）或onerror事件（须防无限循环）主动触发显示。
alt 文本为什么加载失败时不显示
浏览器根本不会自动把 alt 值渲染成可见文字——它只在无障碍场景下供读屏器读取，或在“禁用图片”模式下作为语义 fallback。你看到的断裂图标（如 Chrome 的小方框加叉），就是浏览器对加载失败 <img> 的默认视觉表现，alt 本身不参与这个过程。
用 CSS ::after 强制显示 alt 内容
这是最轻量、无需 JS 的方案，但有硬性前提：
-
<img>必须有明确宽高（width/height或aspect-ratio），否则::after无法占满区域 - 父容器不能设
overflow: hidden，否则伪元素被裁剪 - 必须加
position: relative，否则position: absolute的伪元素会脱离定位上下文
示例 CSS：
img {
position: relative;
width: 200px;
height: 150px;
}
img::after {
content: attr(alt);
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: #f9f9f9; color: #666; font-size: 12px;
display: flex; align-items: center; justify-content: center;
text-align: center; padding: 4px; box-sizing: border-box;
}
onerror 事件比 CSS 更可靠，但要防循环
onerror 是唯一能精准捕获加载失败（404、CORS、MIME 错误等）的原生机制，但它不是“显示 alt”，而是替换资源或 DOM。常见错误包括：
- 直接写
onerror="this.src='fallback.png'"：若 fallback.png 也挂了，会无限触发错误 - 没加防重逻辑，多次插入相同节点或重复替换
- 在 React/Vue 中把
onError放在动态src绑定之后，导致初始空值未触发事件
安全写法（含防重）：
@@##@@
真正容易被忽略的细节
很多人花时间调样式或写事件，却漏掉底层约束：
-
alt属性必须存在且非空字符串（装饰图除外，应为alt=""），否则即使 CSS 生效，attr(alt)也是空的 - 如果图片是通过 JS 动态插入的，得确保插入时
src和alt同时设置，否则浏览器可能跳过加载流程，onerror不触发 -
<picture></picture>里只有最内层<img src="broken.jpg" alt="用户头像" onerror="if (!this.dataset.replaced) { this.dataset.replaced='1'; this.src='/img/placeholder.svg'; }">的alt有效，<source></source>上写alt完全被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
