不能，alt仅作辅助文本不渲染为占位图；需用CSS伪元素、JS替换或data URI SVG实现视觉fallback。
onerror 里写 this.alt 能不能替代图片？
不能。浏览器不会把 alt 文本渲染成“占位图”，它只在图片不可见时（如关闭图像、屏幕阅读器、加载失败且无 fallback）作为辅助文本出现，视觉上仍是空白或断裂图标。真正要显示文字内容，得靠 CSS 或 JS 主动插入。
用 CSS background + ::after 伪元素模拟文字占位图
这是纯 HTML/CSS 实现文字占位的最可靠方式，不依赖 JS，也不触发额外请求。核心是把 img 当容器用，用伪元素覆盖显示文字：
<img src="missing.jpg" alt="用户头像" class="placeholder-text">
.placeholder-text { display: inline-block; position: relative; width: 120px; height: 120px; background: #f5f5f5; }<br>.placeholder-text::after { content: attr(alt); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999; }
- 必须显式设
width和height，否则伪元素无法撑开尺寸 -
content: attr(alt)复用alt值，避免重复维护文字 - 不适用于懒加载图片（
loading="lazy"），因为伪元素始终渲染，而真实图片可能延迟加载
onerror 触发后动态插入文字节点是否可行？
可行，但需谨慎。直接 innerHTML 或 textContent 会破坏原 img 的语义和可访问性，更推荐替换为带文字的 span 容器：
立即学习“前端免费学习笔记（深入）”；
<img src="avatar.jpg" onerror="replaceWithText(this, 'U')">
function replaceWithText(img, text) {<br> const span = document.createElement('span');<br> span.textContent = text;<br> span.style.display = 'inline-flex';<br> span.style.alignItems = 'center';<br> span.style.justifyContent = 'center';<br> span.style.width = img.offsetWidth + 'px';<br> span.style.height = img.offsetHeight + 'px';<br> span.style.background = '#e0e0e0';<br> span.style.color = '#666';<br> span.style.fontSize = '14px';<br> img.replaceWith(span);<br>}
- 务必先读取
img.offsetWidth/offsetHeight，否则新元素尺寸会塌陷 - 替换后
img从 DOM 移除，alt和语义信息丢失，不适合关键内容图（如图表、产品主图） - 如果页面有 SSR 或 SEO 要求，服务端需同步输出 fallback 文字，否则首屏看不到
为什么 data URI 图片比文字占位图更常用？
因为浏览器对 SVG 或小 PNG 的 data URI 解析极快，且自带宽高、可缩放、支持 object-fit，视觉一致性远高于纯文字。一个 200 字节的灰色人形 SVG 占位图，比 “U” 字符更能传达“头像缺失”的意图：
<img src="real.jpg" onerror="this.src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#eee"/><text x="50" y="58" text-anchor="middle" font-size="24" fill="#999">U</text></svg>'">
- SVG data URI 中的
<>"必须 URL 编码，否则解析失败 —— 这是最容易漏掉的坑 - 不要在 data URI 里嵌入大图或复杂样式，base64 编码会使 HTML 体积激增
- 如果项目已用构建工具（如 Vite/Webpack），优先用
url()引入本地 SVG，由工具自动转 data URI，更可控
width/height 属性，比纯文字更稳。 
