Image never reloads with same uri

[RyanMitchellWilson]

I am using an Image component to display a profile picture but no matter what I do to the image component it will not reload the image. I have to use the same url for the profile pictures so I tried to give the Image a unique key prop to try and get it to reload the image but it still just uses the image from cache. I have changed the image on the server countless times but the Image component only shows the original image it got for the url.

It would be great if there was a prop to pass into Image that forces it to refresh the image every time it is rendered.

In a perfect world it would display the image from cache while fetching the new image, compare the two then decide if the image has changed.

• React Native version: 0.41.0
• Platform: Both

[ramilushev]

@RyanMitchellWilson What I do as a workaround is add a meaningless query parameter to the url. Now whenever I want the image to reload, I just change that param and that invalidates the cache.

[RyanMitchellWilson]

So it turns out I was actually hitting the wrong dev environment for the picture so it just looked as though it wasn't changing when it actually was.

[RyanMitchellWilson]

Well it seems I was actually right the first time so I'm going to reopen this issue. I even gave the image a key of Math.random() and it still keeps loading from cache when the image on the server has changed multiple times

[RyanMitchellWilson]

Using @ramilushev suggestion worked but it feels hacky and probably shouldn't be needed.

[LEEY19]

@RyanMitchellWilson have you found a better solution to this ever since then? I do feel that this is an issue that the developers in FB have to look into. its been re-raised and no good solution has been given till now

[huangmr]

Same issue here (only this time with FB account images, LOL). On iOS the image seems to refresh okey-ish after the image view is unmounted, and it also has a cache props for that. On android the image is cached for ever unless do something like @ramilushev suggested, although it is only a workaround and not without side effects (e.g. no cache to use after path change, producing too many junk copies in the cache for the same image). The issue probably boils down to the Fresco library (the Image component uses internally), which currently doesn't seem to have a good knowledge about when to invalidate its cache, and there is no current way of forcing it to invalidate either (or if there is one please let us know).

[wuyunqiang]

ios I can set <Image key ={this.count++} style={{width:SCALE(200),height:SCALE(70)}} source={{uri:ver,cache: 'reload'}}/> and is ok. but android stil bad. please let me know if it be solve.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[RyanMitchellWilson]

This is still a problem

[dbyilmaz]

@RyanMitchellWilson
Did you solve the problem?

[RyanMitchellWilson]

@dbyilmaz Not exactly I'm still using the work around stated above adding a Math.random() to the query string in a way that doesn't affect the url. This causes the url to be different every time so it will actually fetch the image instead of just grabbing it from the cache.

[dbyilmaz]

@RyanMitchellWilson I am using your workaround. I think it is not good. I guess facebook don't think to solve this problem.

[hyochan]

@RyanMitchellWilson @dbyilmaz you can fix this problem by adding new Date() value in key. like

<Image
  key={new Date()}
  style={styles.drawerAccountImg}
  source={uri: this.state.photoURL}
/>

However, I've not tested in android yet.

[malinamircu]

Hi

This worked for me on Android emulator:

<Image key={(new Date()).getTime()} source={{ uri: global.SERVER_ROOT + item['LOGO_IMG']+'?time'+(new Date()).getTime(), headers: {Pragma: 'no-cache' } }} style={{ width: width / 5, height: 100 }} />

Hope it hepls Malina

[crazyfree]

add a query string after url, works for both platform <Image style={styles.drawerAccountImg} source={uri: this.state.photoURL + '?' + new Date()} />

[aswin2772]

Thankz bro...

[dbarros]

Adding a query param to the source works. But it's all too hacky.

[Padillahirpan]

i'm still cant believe its really works

[indrajeet1629]

add a 'time=' param along with image URL, works as well.

<Image source={ { uri : this.props.userData.profileImgURL + '?time=' new Date() }} />

[Dror-Bar]

Still an issue - cache: 'reload' doesn't work on Android. Only hacky solutions work but they put a lot of junk images in the cache which is bad...

[tokinonagare]

Still an issue, wish to resolve : )

[Faolain]

+1

[I-O-O-I]

<Image source={{uri: <your_image_uri>, CACHE: 'reload'}} />

CACHE prop worked for me.

[Dror-Bar]

@I-O-O-I As mentioned in the thread, that is for IOS only, it does not work for Android.

[ahpollen]

+1

[singhal-akash67]

<Image style={{flex:3,width:'100%'}} source={{uri: image.thumbnailUrl+'?'+new Date().getDate()}} key={image${i}}/> This worked for me, currently react native does not have support for android, so we need some kind of hack

[harikanammi]

hi, i am using this property for android:-

<Image
source={uri: this.state.uri + '?' + new Date()}
/>

For iOS:- <Image source={{uri: this.state.uri, CACHE: 'reload'}} />

But any changes doing in that particular screen then image is disappearing like below mentioned gif file :- Please give any suggestion for this issue.

[habibiazmi123]

same issue @harikanammi

[zoix]

I haven't tried this, but in Vue the same happened to me. It didn't work with Date() but it worked with Math.random(). It would be something like this:

<Image source= { uri: this.state.uri + '?rnd=' + Math.random() } />

[harikanammi]

hi @agamadev, thank you for your reply. <Image source= { uri: this.state.uri + '?rnd=' + Math.random() } /> this is not working for me. Image disappearing issue is not fixed.