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保持不变。

技巧只是在图像更改时向更改的图像添加键属性。例如：

<Image key={Date.now()} source={{uri: <your local uri>}/>

Source: this GitHub comment

Answer 2

我认为这是因为浏览器缓存。尝试在图片网址更改后添加date.now()之类的哈希值。例如：

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

并在渲染中：

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

Answer 3

您可以尝试将第一个设置状态设置为null，这样图像就不会显示，并再次将状态设置为带路径的特定图像。

 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 : 'your new image path or older as you explained both are same' + '?' + Math.random()
                });
            }
        }

希望这会有所帮助。

Answer 4

对我来说很好。

ds.WriteXml(XmlDataPath) $ {props.src}？$ {new Date（）。getTime（）} <img src={

Answer 5

只需将图像路径设置为空白，然后设置为您的路径，react将假定其已更改并且将加载新图片。

this.setState({image_path : ''});               
this.setState({image_path : 'Actual Image Source'});

就像我在FileUpload函数中所做的一样

this.setState({userimage:''});  
this.setState({userimage:"http://localhost:5000/auth/getProfilePic/" + this.state.username,});

Answer 6

（Eric Wiener 回答的增强），在上传到 s3 时设置密钥（即时间戳）以获得更清晰的刷新。

const [timestamp, setTimestamp] = React.useState(Date.now());

axios.post("/api/upload/s3", formData)
    .then(res => {
        setTimestamp(Date.now())
    })

<Avatar key={timestamp} className={classes.avatar} src={user_info.avatar} onClick={handleOpenPicture}></Avatar>

Answer 7

将当前日期作为查询参数添加到图片网址

<img src={`${image_url}?${global.Date.now()}`} />

Answer 8

这适用于功能组件（我还没有在基于类的组件上尝试过，但它也应该适用）：

const MyComponent = () => {
  const [source, setSource] = useState('some_image.png');

  const changeImage = (newSource) => {
    setSource(null);
    setTimeout(() => setSource(newSource));
  };

  return (
    <img 
      src={source}
    />
  );
};

注意：我曾尝试使用随机散列并更改密钥，但没有奏效。这可能对您有用

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

8 个答案: