Reactで画像ファイルを任意のタイミングでリフレッシュする方法

Reactで画像ファイルを任意のタイミングでリフレッシュする方法:

TL;DR

imgタグのsrcにハッシュをつければ良い

サンプルコード

以下のコードではhashをReactコンポーネントのstateにもたせている。

hashはimgタグのsrcの最後にクエリパラメータとして渡す。

hashの値を変えるメソッドrefreshImgを呼ぶことで任意のタイミングで画像をリフレッシュすることができる。

render() { 
  const { imgHash } = this.state; 
  return <img src={`/img/url?${imgHash}`} 
} 

refreshImg() { 
  this.setState({ 
    imgHash: new Date().getTime(), 
  }); 
} 

参考：Force React to reload an image file?