React项目中图片加载404时替换默认图片的问题求助

你之前的写法存在两个核心问题：

• 第一种写法里的onError直接赋值this.src是错误的，onError需要接收一个函数，而且React中不能直接操作DOM属性，得通过状态来管理图片地址。
• 第二种写法没有监听图片加载错误事件，自然无法处理服务器返回404的情况。

下面是两种可行的实现方式：

函数组件版本（推荐） #

import { useState } from 'react';

// 封装成可复用组件
const ImageWithFallback = ({ src, fallbackSrc, className, alt }) => {
  // 用状态管理当前显示的图片地址，初始值优先用传入的src，为空则用默认图
  const [imageSrc, setImageSrc] = useState(src || fallbackSrc);

  const handleImageError = () => {
    // 加判断避免默认图也加载失败时无限触发错误事件
    if (imageSrc !== fallbackSrc) {
      setImageSrc(fallbackSrc);
    }
  };

  return (
    <img
      src={imageSrc}
      className={className}
      alt={alt}
      onError={handleImageError}
    />
  );
};

// 使用示例
<ImageWithFallback 
  src={imgURL} 
  fallbackSrc="https://image.defaul-img.jpg" 
  className="card-img-top" 
  alt="..." 
/>

类组件版本 #

如果你还在使用类组件，可以这么写：

class ImageWithFallback extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imgSrc: props.src || props.fallbackSrc
    };
    this.handleImageError = this.handleImageError.bind(this);
  }

  handleImageError() {
    if (this.state.imgSrc !== this.props.fallbackSrc) {
      this.setState({ imgSrc: this.props.fallbackSrc });
    }
  }

  render() {
    return (
      <img
        src={this.state.imgSrc}
        className={this.props.className}
        alt={this.props.alt}
        onError={this.handleImageError}
      />
    );
  }
}

// 使用示例
<ImageWithFallback 
  src={imgURL} 
  fallbackSrc="https://image.defaul-img.jpg" 
  className="card-img-top" 
  alt="..." 
/>

核心逻辑说明 #

1. 用React状态管理图片的src值，而非直接操作DOM，符合React的数据流规范。
2. onError事件触发时，将状态更新为默认图地址，触发组件重新渲染。
3. 添加判断条件，防止默认图也加载失败时，无限循环触发错误事件。

内容的提问来源于stack exchange，提问作者Curious