当 react 应用中的 `` 标签因网络问题、404 或无效 url 导致加载失败时，可通过 `onerror` 事件动态切换为默认占位图，关键在于正确绑定事件处理器并防止无限循环。
在 React 中，仅靠三元运算符判断 src 是否为空（如 !imgURL ? defaultSrc : imgURL）无法解决服务端返回 404 的场景——因为此时 imgURL 是合法字符串，但图片资源实际不可达。真正可靠的方式是监听原生 <img> 元素的 error 事件，并在触发时主动替换 src。
以下为推荐实现方案：
<img
src={!imgURL ? "https://image.defaultimg.jpg" : imgURL}
onError={({ currentTarget }) => {
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 数据流规范的最佳实践。
