如何在 React 中为图片加载失败时优雅降级到默认图像

本文介绍在 react 应用中处理 `` 标签加载失败（如 404）的正确方式，通过 `onerror` 事件动态替换为默认图片，并避免无限循环等常见陷阱。

在 react 开发中，图片资源因 URL 无效、网络异常或服务端返回 404 而加载失败是常见问题。仅靠初始 src 的三元判断（如 !imgURL ? defaultSrc : imgURL）无法覆盖「URL 有效但资源实际不存在」的场景——此时浏览器会触发 onError 事件，需在此回调中主动降级。

正确的做法是使用 onError 事件处理器，并立即清除当前元素的 onerror 绑定，防止后续重复赋值导致死循环（例如：默认图本身也加载失败时反复触发）。以下是推荐实现：

@@##@@ {     currentTarget.onerror = null; // 关键：解除事件监听，避免递归触发     currentTarget.src = "https://image.defaultimg.jpg";   }}   className="card-img-top"   alt="图片描述" />

⚠️ 注意事项：

• 不可直接写 onError={this.src = …}：这是赋值表达式，非函数调用，且 this 在函数组件中无意义；类组件中也应避免直接修改 dom 属性而不清除事件。
• 必须置空 currentTarget.onerror：否则当默认图地址也失效时，会再次触发 onError，造成无限重试甚至页面卡顿。
• 若项目使用函数组件 + Hooks，可进一步封装为自定义 Hook（如 useImageFallback），提升复用性；对于大量图片场景，还可结合 loading=”lazy” 和错误状态缓存优化体验。

该方案轻量、兼容性强（支持所有现代浏览器），无需额外依赖，是 React 图片容错处理的标准实践。