reactjs - 强制 React 重新加载图像文件？

Question

我的 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}`} />
  )
}