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

发布时间：2020-12-15 05:05:41 所属栏目：百科来源：网络整理

导读：我的React应用程序允许用户上传个人资料图片.这是通过将图像上传到Amazon S3存储桶并将路径存储到数据库中的图像以及图像上载的日期和时间来完成的.图像的文件名设置为用户的ID. 我在用户上传新图片时遇到问题.由于图像路径相同,React不知道有什么变化,这意

我的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();
    }
}

我可以用它来重新渲染图像吗？我试过这个.forceUpdate()但它不起作用.

我认为这是因为浏览器缓存.尝试在图像URL更改后添加一些像date.now()这样的哈希值.例如：

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

并在渲染：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!