Question

我有一个带有src的基本<img>。

<img src={src} />

如果我将src从说明/1.jpg更改为/2.jpg并且新图片需要1秒钟加载，则React将继续显示/1.jpg，直到加载新图片为止。

我想要的是在加载新图像时丢弃旧图像。（例如显示：无）

知道怎么做到这一点？理想情况下，没有条件渲染，因为我仍然需要使用onLoad和onError

编辑：这是一些更多的代码。它比我的问题复杂一点，但我只是想在图像中添加一些加载和错误状态。

我有一个调用此按钮的按钮

this.props.history.push('/${page + 1}');

这是图像组件，其中src基于URL中的page。

import React, { Component } from 'react';
import CenteredLoading from 'components/loading/CenteredLoading';

type Props = { src: string };

type State = {
  status: 'LOADING' | 'LOADED' | 'FAILED',
};

class ImageWithLoader extends Component<Props, State> {
  state = {
    status: 'LOADING',
  };

  handleImageLoad = () => {
    this.setState({ status: 'LOADED' });
    console.error('image loaded');
  };

  handleImageError = () => {
    this.setState({ status: 'FAILED' });
    console.error('image error');
  };

  render() {
    const { src, ...otherProps } = this.props;
    const { status } = this.state;

    return (
      <React.Fragment>
        <img
        {...otherProps}
        onLoad={this.handleImageLoad}
        onError={this.handleImageError}
        src={src}
        />

        {status === 'LOADING' && <CenteredLoading />}
        {status === 'FAILED' && <p>error</p>}
      </React.Fragment>
    );
  }
}

export default ImageWithLoader;

Answer 1

只需将key属性添加到您的图片标签，然后为key属性（例如图片来源）分配一些唯一的值即可。

<img src={image_source} key={image_source}></img>

Answer 2

制定了我自己的解决方法。

我相信因为反应没有安装新的组件（即<img>），所以在完成加载之前它不会更新到新图像。

我所做的是检查src中的componentDidUpdate是否已更改，并将状态更改为LOADING。然后我将img样式设置为display: none，同时其状态为LOADING。

编辑：此外，通过手动设置我自己的密钥，我可以强制React重新呈现<img>

当src改变时，React img不会立即改变。我怎样才能解决这个问题？

2 个答案: