alt属性不提供视觉fallback，仅用于无障碍和SEO；视觉fallback需CSS伪元素或onerror事件实现，且需注意动态渲染、SVG等特殊场景。
alt 属性本身不会在图片加载失败时自动显示为可见文字——这是最常见的误解。它只负责无障碍描述和 SEO，视觉 fallback 必须靠 CSS 或 JavaScript 主动实现。
为什么 alt 文本默认不显示
浏览器把 alt 当作语义信息，供屏幕阅读器读出或搜索引擎索引，不是 UI 元素。即使 src 404 或为空，<img src="404.jpg" alt="找不到图片"> 在页面上仍是一片空白（或显示浏览器默认的“缺失图标”），alt 值完全不可见。
常见错误现象：
- 开发者检查 Elements 面板看到
alt存在，就以为用户能看到它 - 用 Lighthouse 测出 “alt missing” 报错后，补上
alt就认为 fallback 已解决 - 在移动端 Safari 或旧版 Chrome 中发现
alt文字始终不出现，误判为兼容性问题
img::after + attr(alt) 的 CSS 方案
这是最轻量、无需 JS 的视觉 fallback 方式，但依赖两个前提：元素有明确宽高、且已设 position: relative。
立即学习“前端免费学习笔记（深入）”；
关键实操点：
- 必须显式设置
width和height（或aspect-ratio），否则::after无尺寸可占位 -
img要加position: relative，否则伪元素会脱离容器定位 - 仅对真正加载失败的图片生效，需配合
:not([src])、[src=""]等选择器拦截明显非法值 - 注意 SVG 内联图或 base64 图片可能绕过此逻辑，需单独测试
示例片段：
img {
position: relative;
width: 200px;
height: 150px;
}
img::after {
content: attr(alt);
display: block;
position: absolute;
top: 0; left: 0;
background: #f0f0f0;
color: #666;
font-size: 12px;
padding: 4px;
overflow: hidden;
}
onerror 事件替换 DOM 的可靠方案
只有 onerror 能准确捕获网络层加载失败（404/timeout/CORS），比 CSS 伪类更精准，也避免了空 src 或协议错误等边界情况漏判。
注意事项：
- 不能写成
<img onerror="this.alt = 'xxx'">—— 改alt不会让文字显示出来 - 推荐直接替换为
<span>或文本节点：this.replaceWith(document.createTextNode(this.alt)) - 需加
data-replaced标记防止多次触发（如备用图再失败） - jQuery 的
.error()已废弃，现代项目应避免使用
最小可用代码：
<img src="broken.jpg" onerror="this.replaceWith(document.createTextNode(this.alt))" alt="图片加载失败">
容易被忽略的复杂点
真正难处理的不是单张图片 fallback，而是动态渲染场景下的状态一致性：React/Vue 列表中某张图失败后，alt 可能是 undefined 或 null，导致生成 alt="undefined"；服务端渲染时若后端未兜底，前端拿到的就是空字符串；SVG 图片根本不支持 alt，得用 <title> + role="img" 替代。这些地方一旦疏忽，fallback 就变成“假 fallback”。
