如何在 React 中优雅处理图片加载失败并回退到默认图像

当 react 应用中的 `` 标签因网络问题、404 或无效 url 导致加载失败时，可通过 `onError` 事件动态切换为默认占位图，关键在于正确绑定事件处理器并防止无限循环。

在 react 中，仅靠三元运算符判断 src 是否为空（如 !imgURL ? defaultSrc : imgURL）无法解决服务端返回 404 的场景——因为此时 imgURL 是合法字符串，但图片资源实际不可达。真正可靠的方式是监听原生 元素的 error 事件，并在触发时主动替换 src。

以下为推荐实现方案：

@@##@@ {     currentTarget.onerror = null; // ✅ 关键：清除事件处理器，避免替换后再次触发 error（如默认图也加载失败）     currentTarget.src = "https://image.defaultimg.jpg";   }}   className="card-img-top"   alt="Product image" />

为什么必须设置 currentTarget.onerror = NULL？
若不移除事件监听器，当默认图片 URL 本身也失效时，会再次触发 onError，导致无限递归设置 src，甚至可能引发 React 渲染异常或内存泄漏。

进阶建议（推荐用于生产环境）：

• 将逻辑封装为自定义 Hook（如 useImageFallback），提升复用性；
• 结合 useState 管理加载状态（如 loading / error），支持骨架屏或错误提示；
• 使用 loading=”lazy” 配合 onLoad 事件优化首屏体验；
• 对默认图 URL 做基础校验（避免默认图自身出错），或使用内联 svg 占位符确保 100% 可用。

该方案兼容所有现代浏览器，无需额外依赖，是轻量、健壮且符合 React 数据流规范的最佳实践。