不能，alt仅作辅助文本不渲染为占位图；需用css伪元素、js替换或data uri svg实现视觉fallback。
onerror 里写 this.alt 能不能替代图片？
不能。浏览器不会把 alt 文本渲染成“占位图”，它只在图片不可见时（如关闭图像、屏幕阅读器、加载失败且无 fallback）作为辅助文本出现，视觉上仍是空白或断裂图标。真正要显示文字内容，得靠 CSS 或 JS 主动插入。
用 CSS background + ::after 伪元素模拟文字占位图
这是纯 HTML/CSS 实现文字占位的最可靠方式，不依赖 JS，也不触发额外请求。核心是把 img 当容器用，用伪元素覆盖显示文字：
@@##@@
.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 容器：
@@##@@
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” 字符更能传达“头像缺失”的意图：
@@##@@<circle cx="50" cy="50" r="40" fill="#eee"></circle><text x="50" y="58" text-anchor="middle" font-size="24" fill="#999">U</text>'">
- SVG data URI 中的
<code>>"必须 URL 编码，否则解析失败 —— 这是最容易漏掉的坑 - 不要在 data URI 里嵌入大图或复杂样式，base64 编码会使 HTML 体积激增
- 如果项目已用构建工具（如 Vite/Webpack），优先用
url()引入本地 SVG，由工具自动转 data URI，更可控
width/height 属性，比纯文字更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
