イメージファイルをリロードするように強制しますか？

Question

My Reactアプリではユーザーがプロフィール画像をアップロードできます。これは、Amazon S3バケットに画像をアップロードし、画像がアップロードされた日時と共に、データベースへの画像のパスを保存することによって行われます。イメージのファイル名はユーザーのIDに設定されます。

ユーザーが新しい画像をアップロードするときに問題が発生しました。画像パスが同じなので、Reactは何も変わっていないことを知らないので、ページをリフレッシュして変更を確認する必要があります。

私は日付フィールドを持っているので、新しい画像がいつアップロードされたかを知るためにcomponentWillReceivePropsを使用できます。次のconsole.logは正しい時刻に起動します：

componentWillReceiveProps(nextProps) { 
    if (this.state.picDate.getTime() !== nextProps.user.pic.date.getTime()) { 
     console.log('image date has changed'); 
     // this.forceUpdate(); 
    } 
} 

これを使用してイメージを再レンダリングできますか？私はthis.forceUpdate()を試しましたが、動作しません。

Answer 1

私はそれがブラウザのキャッシュのためだと思います。イメージURLが変更された後にdate.now()のようなハッシュを追加してみてください。例えば：

setState({ 
    imageSrc: ..., 
    imageHash: Date.now() 
}) 

とでは、レンダリング：

render(){ 
    return(
     <img src={`${imageSrc}?${imageHash}`} /> 
) 
} 

Answer 2

あなたはとてもイメージ文句を言わない表示をゼロにするために最初のセット状態のようなものをやってみて、再びパスを持つ特定の画像に状態を設定することができます。ここで

constructor(props){ 
      super(props); 
      this.state = { 
      image_path : 'before update image path' 
      }; 
    }  

    componentWillReceiveProps(nextProps) { 
      if (this.state.picDate.getTime() !== nextProps.user.pic.date.getTime()) { 
       console.log('image date has changed'); 
       //now here set state 
       this.setState({ 
         image_path: null 
        },() => { 
        this.setState({ 
        image_path : 'your new image path or older as you explained both are same'}) 
        }) 
      } 
     } 

私はそれがかつてその画像が再びロードされますので、我々は再びその画像パスを設定することができます行わをnullに画像を設定します初めて二回SETSTATEを使用しています。

希望すると、これが役立ちます。