如何检测图像何时加载（通过 props 提供）并在 React 中更改状态？

Question

我想在加载最终头像图像时加载不同的图像（假头像）。这个想法是检测何时加载道具图像并更改状态。可能吗？一些想法？谢谢！

 class ImageUser extends React.Component {

constructor(props) {
    super(props);
    this.state = {userImageLoaded: false};
    let imageSrc = "";

    if (!this.props.userImage) {
        imageSrc = this.props.noUserImage;
    } else {
        imageSrc = this.props.userImage;
    }

    this.loadingImage = <img className={styles.imageUser}
                     src={this.props.loadingImage} alt="2"/>;

    this.userImage =
        <img onLoad={this.setState({userImageLoaded: true})}
             className={styles.imageUser} src={imageSrc}
             alt="1"/>;

}

render() {
    let image = "";
    if (this.state.userImageLoaded) {
        image = this.userImage;
    } else {
        image = this.loadingImage;
    }
    return (
        <div>
            {image}
        </div>
    );
}
}

export default ImageUser;

原文由 Sergio Jimenez Corominas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有几种方法可以做到这一点，但最简单的是隐藏显示最终图像，然后在加载后将其翻转为可见。

JSBin 演示

class Foo extends React.Component {
  constructor(){
    super();
    this.state = {loaded: false};
  }

  render(){
    return (
      <div>
        {this.state.loaded ? null :
          <div
            style={{
              background: 'red',
              height: '400px',
              width: '400px',
            }}
          />
        }
        <img
          style={this.state.loaded ? {} : {display: 'none'}}
          src={this.props.src}
          onLoad={() => this.setState({loaded: true})}
        />
      </div>
    );
  }
}

原文由 Brigand 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

与 Brigand 接受的答案相同但带有 Hooks：

 const Foo = ({ src }) => {
  const [loaded, setLoaded] = useState(false);

  return (
    <div>
      {loaded ? null : (
        <div
          style={{
            background: 'red',
            height: '400px',
            width: '400px'
          }}
        />
      )}
      <img
        style={loaded ? {} : { display: 'none' }}
        src={src}
        onLoad={() => setLoaded(true)}
      />
    </div>
  );
};

原文由 lee_mcmullen 发布，翻译遵循 CC BY-SA 4.0 许可协议