本文介绍在 react 应用中正确处理 `` 标签因 404 或网络异常导致加载失败的方案，通过 `onerror` 事件安全替换为默认图像，并避免无限循环和重复触发。
在 React 中，仅靠三元判断 src 是否为空（如 !imgURL ? defaultSrc : imgURL）无法解决服务器返回 404 的情况——因为 URL 字符串本身有效，但资源实际不可达。此时必须借助浏览器原生的 <img> 元素 error 事件进行运行时兜底。
✅ 正确做法是使用 onError 事件处理器，在图片加载失败时动态修改 currentTarget.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="产品图片"
/>⚠️ 注意事项：
- 不可直接写 onError={this.src = "..."}：这会立即执行赋值（且 this 指向错误），而非在错误发生时调用；
- 必须置空 onerror：否则当默认图本身也加载失败（如 CDN 故障），会反复触发 onError，造成无限循环或控制台报错；
- 推荐使用函数式组件 + React 18+：若需更健壮的控制（如加载状态、重试逻辑、懒加载兼容），可封装为自定义 Hook（如 useImageFallback）或使用 Suspense + ErrorBoundary 组合方案；
- 服务端优化建议：配合 srcSet、loading="lazy" 及 CDN 缓存策略，进一步提升首屏图片健壮性。
总结：图片容错不是“写个备用 URL”就能解决，而是需要结合事件机制与生命周期意识。上述 onError + currentTarget.onerror = null 是当前最轻量、兼容性最佳、React 官方推荐的实践模式。
