图片加载失败时用默认图替换的核心是监听img的onerror事件并切换src，可内联绑定或javascript批量处理，需防止循环错误，配合loading和fetch可优化但受限于同源策略。

图片加载失败时用默认图替换，核心是监听 img 元素的 onerror 事件，在触发时把 src 换成备用图片地址。

直接在 HTML 中绑定 onerror

最简单的方式是在 <img> 标签里内联写 onerror，适合静态页面或少量图片：

@@##@@

注意：要确保默认图路径有效，且避免循环错误（比如默认图也加载失败）——可加一层判断防止重复触发：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

@@##@@

用 JavaScript 统一处理多个图片

动态渲染或图片较多时，推荐用脚本批量监听。给所有需要容错的 img 加个类名（如 js-lazy-img），再统一绑定：

document.querySelectorAll('img.js-lazy-img').forEach(img => {
  img.addEventListener('error', function() {
    if (this.src !== '/images/default.png') {
      this.src = '/images/default.png';
      this.alt = '图片加载失败';
    }
  });
});

使用现代方式：loading 和 fetch 检测（进阶）

纯前端无法预知图片是否有效，但可以配合 loading="lazy" 减少无效请求，并用 fetch 提前探测（仅限同源）：

• 对跨域图不适用 fetch 检查（会触发 CORS 错误）
• onerror 仍是主流可靠方案，兼容性好（IE8+ 支持）
• 若用 Vue/React 等框架，建议封装成组件或指令，复用逻辑

补充技巧：加载中占位与样式降级

除了失败替换，还可提升体验：

• 设置 img 的 width/height 或 CSS aspect-ratio，避免布局抖动
• 用 CSS 设置背景色或骨架屏作为加载中状态：img { background: #f0f0f0; }
• 失败后可添加 class（如 .img-error），用于统一加边框、图标提示等视觉反馈

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