React中如何实现图片加载失败时自动替换为默认图片

你原来的检测逻辑没法直接接入React的核心原因有两个：

• onload/onerror是异步回调，回调里的返回值不会被testImage的调用方接收到，同步调用拿不到结果
• 全局只初始化了一个Image实例，同时检测多张图片时会出现状态覆盖，结果不可靠

实际上完全不需要写独立的预检测逻辑，利用img标签原生的error事件就能实现需求，代码更简洁也没有额外开销。

推荐方案：直接绑定原生onError事件 #

直接在React渲染的img标签上绑定错误事件，加载失败时替换src即可，这是生产环境最常用的实现方式：

<img 
  className="article_link_image" 
  src={article.image}
  onError={(e) => {
    // 先清空onError，避免默认图也加载失败时无限触发回调死循环
    e.currentTarget.onerror = null;
    e.currentTarget.src = '/generic.png';
  }}
/>

这个方案的优势：

• 没有额外的预加载请求，不会浪费带宽
• 多图场景下不会出现状态冲突
• 逻辑和视图绑定，后续维护成本低

*注意必须在触发错误后先清空onError绑定，否则如果默认图路径配置错误，会无限触发error回调导致页面卡死。

预检测逻辑改造方案（特殊场景用） #

如果你确实有提前检测图片可用性、预加载的需求，可以把原来的检测方法改造成Promise形式，在组件中配合状态使用，注意不要用全局共享的Image实例：
首先改造工具函数：

// imageUtils.js
function testImage(url) {
  return new Promise((resolve) => {
    // 每次检测新建独立Image实例，避免多图冲突
    const img = new Image();
    img.onload = () => resolve(url);
    img.onerror = () => resolve('/generic.png');
    img.src = url;
  });
}

module.exports = testImage;

在函数组件中配合useEffect和useState使用：

import { useState, useEffect } from 'react';
import testImage from './imageUtils';

function ArticleCard({ article }) {
  // 初始化默认展示兜底图
  const [imgSrc, setImgSrc] = useState('/generic.png');

  useEffect(() => {
    // 标记组件挂载状态，避免组件卸载后更新state引发内存泄漏
    let mounted = true;
    testImage(article.image).then((validUrl) => {
      if (mounted) setImgSrc(validUrl);
    });

    return () => {
      mounted = false;
    };
  }, [article.image]);

  return <img className="article_link_image" src={imgSrc} alt="文章封面" />;
}

这个方案会产生两次图片请求（预检测一次、img标签渲染一次），非特殊预加载场景不推荐使用。

内容的提问来源于stack exchange，提问作者k.m.