JavaScript处理图片加载失败的核心是监听onerror事件并动态替换src，需设this.onerror=null防循环，推荐用相对路径或可靠CDN占位图；批量场景宜用addEventListener统一管理，兼顾语义alt与noscript降级。
JavaScript 中处理图片加载失败、显示替代图片，核心是监听 onerror 事件，并在触发时动态替换 src 属性。关键在于防止无限循环（比如备用图也加载失败），同时兼顾语义和可维护性。
使用 onerror 事件直接替换（最常用）
在 <img> 标签中内联写 onerror，是最简洁的方案：
<img src="avatar.jpg"
onerror="this.src='placeholder.png'; this.onerror=null;"
alt="用户头像">
注意两点：
-
必须加
this.onerror = null：否则当placeholder.png也加载失败时，会再次触发onerror，导致无限递归或报错 -
推荐使用相对路径或确保备用图绝对可靠：例如用 CDN 上的通用占位图（如
https://via.placeholder.com/200x200?text=Img+Error）
用 addEventListener 统一管理（适合批量操作）
如果页面有多个图片需统一处理，或逻辑较复杂（比如上报错误、尝试多个备用图），建议用脚本集中绑定：
立即学习“Java免费学习笔记（深入）”；
document.querySelectorAll('img[data-fallback]').forEach(img => {
img.addEventListener('error', function() {
const fallback = this.dataset.fallback;
if (fallback && this.src !== fallback) {
this.src = fallback;
} else {
this.src = '/images/missing.png';
}
});
});
HTML 中这样写：
<img src="photo.jpg" data-fallback="photo-thumb.jpg" alt="配图">
好处是结构清晰、可复用，且避免内联 JS，便于后续维护或按需启用。
结合 loading="lazy" 和现代特性注意兼容性
若图片启用了懒加载（loading="lazy"），onerror 仍会正常触发，无需额外处理。但要注意：
- 旧版 Safari（iOS 14.5 之前）不支持
loading="lazy"，但onerror兼容所有主流浏览器（包括 IE8+） - 如果用
fetch()预检图片是否存在再决定是否渲染，属于更重的方案，一般没必要——除非业务对加载失败敏感度极高（如电商主图）
语义化补充：别忘了 alt 和 noscript
onerror 是行为层兜底，而 alt 是语义层基础。即使图片加载成功，也要写有意义的 alt 文本；若 JS 被禁用，可配合 <noscript> 提供静态降级：
<img src="chart.jpg" onerror="this.src='chart-fallback.png';this.onerror=null;" alt="2024年销售趋势图"> <noscript> <img src="chart-fallback.png" alt="销售趋势图（简化版）"> </noscript>
