17370845950

本文介绍在 react 应用中正确处理 `` 标签因 404 或网络异常导致加载失败的方案，通过 `onerror` 事件安全替换为默认图像，并避免无限循环和重复触发。

在 React 中，仅靠三元判断 src 是否为空（如 !imgURL ? defaultSrc : imgURL）无法解决服务器返回 404 的情况——因为 URL 字符串本身有效，但资源实际不可达。此时必须借助浏览器原生的 元素 error 事件进行运行时兜底。

✅ 正确做法是使用 onError 事件处理器，在图片加载失败时动态修改 currentTarget.src，同时立即清除该事件监听器，防止后续因默认图再次加载失败而触发递归错误：

@@##@@ {
    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 官方推荐的实践模式。