當 src 更改時，React img 不會立即更改。 我怎樣才能解決這個問題？

Question

我有一個帶有 src 的基本<img> 。

<img src={src} />

如果我將 src 從/1.jpg為/2.jpg並且新圖像需要 1 秒才能加載，React 將繼續顯示/1.jpg直到加載新圖像。

我想要的是在加載新圖像時丟棄舊圖像。 （例如顯示：無）

知道如何做到這一點嗎？ 理想情況下沒有條件渲染，因為我仍然需要使用onLoad和onError

編輯：這里還有一些代碼。 這比我的問題要復雜一點，但我只是想為圖像添加一些加載和錯誤狀態。

我有一個按鈕調用這個 onClick

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

只需將關鍵屬性添加到您的圖像標簽，並為圖像源等關鍵屬性分配一些唯一值。

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

Answer 2

做了我自己的解決方法。

我相信因為 react 沒有安裝新組件（即<img> ），所以在加載完成之前它不會更新到新圖像。

我所做的是檢查src在componentDidUpdate更改並將狀態更改為LOADING 。 然后我將 img 樣式設置為display: none而其狀態為LOADING 。

編輯：另外，通過手動設置我自己的密鑰，我可以強制 React 重新渲染<img>