最直接的方式是用onerror="this.src='default.jpg'"实现图片加载失败时显示默认图，需确保默认图URL可访问、避免函数调用错误、禁用CSS background-image兜底（无语义且不触发懒加载），框架中应防循环触发并预加载默认图。
img 标签的 onerror 事件怎么用
图片加载失败时显示默认图，最直接的方式就是利用 onerror 事件重写 src。它会在浏览器尝试加载 src 失败后立即触发，且只触发一次（即使后续再次赋值失败也不会重复触发）。
常见错误是把 onerror 写成函数调用形式，比如 onerror="fallback()" 却没定义 fallback，或者在内联里写了 this.src = 'default.jpg' 但忘了加引号或分号，导致 JS 解析失败、事件静默失效。
实操建议：
- 内联写法最简：在
<img>标签里直接写onerror="this.src='https://example.com/default.png'" - 确保默认图 URL 是可访问的，否则会陷入“加载失败 → 触发 onerror → 加载默认图又失败 → 不再触发 onerror”的静默黑洞
- 避免在
onerror中调用外部函数，除非该函数已全局声明且无依赖；否则容易因执行时机问题报ReferenceError
为什么不能只靠 CSS 的 background-image fallback
CSS 的 background-image 确实支持多层写法，比如 background-image: url(broken.jpg), url(default.png)，但这是“叠加”而非“兜底”——两图都会发起请求，且浏览器不会因为第一张 404 就自动切到第二张；它只是按顺序渲染，第一张若加载失败仍留空白或背景色。
立即学习“前端免费学习笔记（深入）”；
更关键的是：background-image 不具备语义化和可访问性（alt 文本、屏幕阅读器无法识别），也不支持原生图片的缩放行为（如 object-fit）、懒加载（loading="lazy"）或响应式 srcset。
所以，纯 CSS 方案不是加载失败兜底的正确解，仅适合装饰性背景图。
Vue/React 里怎么安全处理图片 fallback
框架环境下，直接操作 this.src 容易破坏响应式或组件生命周期。例如 Vue 模板中写 @error="src = defaultSrc" 可能因响应式更新不及时导致闪烁或无效；React 中若在 onError 回调里用 setState 更新 src，可能触发重新渲染并再次触发 onError（尤其当状态未做防抖或来源未清理时）。
实操建议：
- Vue：用
v-on:error.once+ref直接操作 DOM 元素的src，避免响应式干扰 - React：在
onError中检查当前event.target.src是否已等于默认图 URL，防止循环触发 - 两者都建议把默认图 URL 提前预加载（
new Image().src = defaultUrl），避免 fallback 时首次加载延迟
现代方案：使用 HTML 的 loading 和 decoding 属性辅助判断
loading="lazy" 和 decoding="async" 本身不解决 fallback，但会影响 onerror 触发时机。比如设置了 loading="lazy" 的图片在视口外时根本不会触发加载，也就不会触发 onerror；而 decoding="async" 可能让解码失败被误判为加载失败。
这意味着：如果你依赖 onerror 做兜底，必须确认图片确实进入了加载流程。一个容易被忽略的点是——服务端返回了 200 状态码但响应体为空或非图片内容（如 JSON 错误页），浏览器仍会触发 onerror；但若返回的是 404 页面 HTML，部分浏览器可能不触发（取决于 MIME 类型解析结果）。
所以真正健壮的做法，是把 fallback 逻辑和资源可用性监控结合，而不是只信 onerror 一次回调。
