alt属性是img标签的必需语义属性，用于无障碍描述而非视觉fallback；浏览器默认不显示alt文本，需通过CSS伪元素或onerror事件主动实现可见占位。
Alt 属性不是 fallback 机制，它不参与加载失败处理
很多人误以为 alt 文本会在图片加载失败时“自动显示出来”，其实不然：alt 是无障碍描述，浏览器渲染时只要 <img> 元素存在（哪怕 src 404），就会把 alt 当作替代文本读给屏幕阅读器听，但**视觉上默认不显示**——除非你主动用 CSS 控制。真正的“占位文本”需要你干预样式或监听加载状态。
让 alt 文本在图片加载失败时可见的 CSS 方案
现代浏览器对加载失败的 <img> 会触发 :not([src]) 或 :empty 伪类？不，都不行。可靠方式是利用浏览器对失败图片渲染的固定行为：失败时 <img> 仍保留在 DOM 中，但尺寸坍缩（宽高为 0），且会呈现一个带边框的“缺失图标”。此时可结合 alt + ::after 或 content 实现视觉占位：
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 值 */
}注意：::after 在 <img> 上生效需满足两个条件：元素有宽高（建议显式设 width/height 或用 aspect-ratio），且 position: relative 已设置；否则伪元素可能脱离文档流或不可见。
更健壮的方案：用 onerror 事件替换为纯文本节点
onerror 是唯一能准确捕获加载失败的原生机制。但它不能直接修改 alt 的显示逻辑，而是该用来降级 DOM 结构：
立即学习“前端免费学习笔记（深入）”；
- 不要在
onerror里只改alt——这不会让文本显示出来 - 推荐做法：移除
<img>，插入一个<div>并把alt内容写进去 - 注意避免重复触发：给元素加标记（如
data-loaded="false"），并在onerror回调中设为"true"防止多次执行
示例：
<img src="broken.jpg" alt="用户头像缺失"
onerror="if (!this.dataset.loaded) { this.replaceWith(Object.assign(document.createElement('div'), {textContent: this.alt, style: 'display:inline-block;padding:4px;background:#f5f5f5;color:#666;font-size:12px'})); this.dataset.loaded='true'; }">为什么不能依赖浏览器默认 fallback 行为
不同浏览器对加载失败图片的 UI 处理不一致：Chrome 显示小图标 + “×”，Safari 只显示空白区域，Firefox 有时连边框都不画。而 alt 文本永远只对辅助技术有效，绝不会作为视觉 fallback 自动渲染。如果你没写 CSS 或 JS 处理，用户看到的就是一片空白或奇怪图标——尤其在移动端或低分辨率屏上，根本看不出哪里该有图。
真正要解决“占位”，就得明确选择路径：CSS 覆盖（轻量但受限于布局）、JS 替换（可控但增加执行开销）、或服务端预检（如用 HTTP HEAD 验证资源存在，成本高）。三者没有银弹，得看你的场景是否允许 JS 执行、是否要求 SEO 友好、是否需支持无样式环境。
