javascript处理图片加载失败的核心是监听onerror事件并动态替换src，需设this.onerror=null防循环，推荐用相对路径或可靠cdn占位图；批量场景宜用addeventlistener统一管理，兼顾语义alt与noscript降级。

JavaScript 中处理图片加载失败、显示替代图片，核心是监听 onerror 事件，并在触发时动态替换 src 属性。关键在于防止无限循环（比如备用图也加载失败），同时兼顾语义和可维护性。

使用 onerror 事件直接替换（最常用）

在 <img> 标签中内联写 onerror，是最简洁的方案：

@@##@@

注意两点：

• 必须加 this.onerror = null：否则当 placeholder.png 也加载失败时，会再次触发 onerror，导致无限递归或报错
• 推荐使用相对路径或确保备用图绝对可靠：例如用 CDN 上的通用占位图（如 https://via.placeholder.com/200x200?text=Img+Error）

用 addEventListener 统一管理（适合批量操作）

如果页面有多个图片需统一处理，或逻辑较复杂（比如上报错误、尝试多个备用图），建议用脚本集中绑定：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

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 中这样写：

@@##@@

好处是结构清晰、可复用，且避免内联 JS，便于后续维护或按需启用。

结合 loading="lazy" 和现代特性注意兼容性

若图片启用了懒加载（loading="lazy"），onerror 仍会正常触发，无需额外处理。但要注意：

• 旧版 Safari（iOS 14.5 之前）不支持 loading="lazy"，但 onerror 兼容所有主流浏览器（包括 IE8+）
• 如果用 fetch() 预检图片是否存在再决定是否渲染，属于更重的方案，一般没必要——除非业务对加载失败敏感度极高（如电商主图）

语义化补充：别忘了 alt 和 noscript

onerror 是行为层兜底，而 alt 是语义层基础。即使图片加载成功，也要写有意义的 alt 文本；若 JS 被禁用，可配合 <noscript></noscript> 提供静态降级：

@@##@@
<noscript>
  @@##@@
</noscript>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南