不能在上用::before显示可靠占位图，因为它是替换元素，浏览器按css规范不支持伪元素渲染；唯一可靠方案是用容器包裹，对容器应用::before并设置显式宽高或aspect-ratio。
直接在 <img> 上写 onerror="this.src='...'" 是最常见也最容易翻车的做法——它会触发死循环、构建哈希路径失效、fallback 图片二次失败时页面空白。
为什么 img::before 在现代浏览器里根本不起作用
<img> 是 CSS 规范定义的「替换元素」，不生成用于插入伪元素的匿名框。哪怕你写了 position: relative 和 width/height，img::before 在 Chrome/Firefox/Safari/Edge 中都会被标记为 invalid，样式压根不会生效。
别被旧教程误导：早期 Chrome 曾短暂支持，但早已移除；当前所有主流渲染引擎都明确忽略。
- 检查 DevTools 的 Styles 面板，如果该规则没出现或标红，就说明它被规范丢弃了
- 想用伪元素，唯一可靠路径是换结构：用
<div class="img-wrap"><img></div> - 伪元素必须依赖父容器显式宽高（
w-64 h-48或aspect-video），否则::before会塌缩成 0×0
onerror 必须加 this.onerror = null
内联 onerror 不是“设置 fallback”，而是“注册一次监听”。如果不手动清除，当 fallback 图片也 404 时，会再次触发 onerror，陷入无限循环或控制台报错。
正确写法只有一行：onerror="this.onerror=null; this.src='/placeholder.svg'"
- 优先用 SVG 占位图（体积小、缩放无损、可内联 base64）
- 确保路径部署稳定，不依赖 Webpack/Vite 的哈希命名（比如放
public/下，或用构建后可预测的路径） - 避免写
onerror="this.src='data:image/svg+xml,...'"—— 长 base64 字符串在 iOS Safari 解码可能卡顿
用容器包裹 + 伪元素兜底才是真优雅
把尺寸控制、背景色、占位文案、图标全部交给父容器，<img> 只负责语义和加载逻辑。这才是不破坏布局、不干扰可访问性、还能自然过渡的方案。
关键结构：
<div class="img-wrap"> @@##@@ </div>
-
.img-wrap必须设position: relative+ 显式宽高（如w-full aspect-video） - 失败时给容器加类：
onerror="this.onerror=null; this.closest('.img-wrap').classList.add('error')" - CSS 用
.img-wrap.error::before渲染图标或文字，加pointer-events: none防止遮挡焦点 - 如果要保留
<img src="real.jpg" alt="描述" onerror="this.onerror=null; this.src='/placeholder.svg'">的 SEO 和读屏能力，就别用background-image替代——伪元素只是视觉兜底，不是内容替代
最容易被忽略的是：所有占位逻辑都依赖容器尺寸锁定。没 aspect-ratio 或固定 h-48，图片加载失败时，整个区域可能塌成一条线，连警告图标都看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
