Force React to reload an image file?
I was having this issue with a local image. The image was being modified, but the URL was staying the same.
The trick was just to add a key property to the image that changed whenever the image changed. For instance:
<Image key={Date.now()} source={{uri: <your local uri>}/>
Source: this GitHub comment
You can try doing something like first set state to null so image wont display and again set state to particular image with path.
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()
});
}
}
I think that's because of the browser cache. try adding some hash like date.now()
after image URL changes. for example:
setState({
imageSrc: '...',
imageHash: Date.now()
})
and in render:
render(){
return(
<img src={`${imageSrc}?${imageHash}`} />
)
}
Its working fine for me.
<img src={`${props.src}?${new Date().getTime()}`} />