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

Tags:

Reactjs