本文介绍了在 react 应用中通过 `onerror` 事件监听图片加载失败（如 404），并动态替换为默认图片的正确实现方式，避免无限循环和语法错误。
在 React 中，当 <img> 标签的 src 指向一个无法访问的资源（例如服务器返回 404）时，浏览器会触发 onError 事件。但需注意：直接在 JSX 中写 onError={this.src="..."} 是无效且错误的——这既不是合法的事件处理器（语法错误），也无法访问 DOM 元素；而仅靠三元判断 !imgURL 只能处理空值或假值，无法捕获已渲染但加载失败的图片。
✅ 正确做法是使用函数式事件处理器，在 onError 回调中获取当前 <img> 元素，并安全地更新其 src：
<img
src={!imgURL ? "https://image.defaultimg.jpg" : imgURL}
onError={({ currentTarget }) => {
currentTarget.onerror = null; // 关键：清除事件监听器，防止递归触发
currentTarget.src = "https://image.defaultimg.jpg";
}}
className="card-img-top"
alt="Product image"
/>? 关键细节说明：
- currentTarget 指向当前绑定事件的 <img> 元素，确保操作准确；
- currentTarget.onerror = null 是必需步骤：否则当默认图也加载失败时，会再次触发 onError，导致无限循环甚至页面卡顿；
- 优先保留 src 的条件判断（!imgURL ? ... : ...），可同时覆盖「空 URL」和「加载失败」两种场景；
- 建议为默认图 URL 使用稳定、高可用的 CDN 地址，并确保格式/尺寸与业务图一致，以维持 UI 一致性。
? 进阶提示：若项目中多处使用该逻辑，可封装为自定义 Hook（如 useImageFallback）或可复用组件（如 <SafeImage />），进一步提升可维护性与健壮性。
