Forcing an image refresh from URL?

Hey all,

I have dropped an Image component onto a form, and its source is a URL-linked PNG file. The image is a custom avatar that can be set via API calls, which then update image so that the avatar’s appearance is customized (the URL stays constant the whole time).

I want to refresh the Image component and have it pull from that URL once again to get the updated image, however it seems to cache the old image and displays the same (old) one again instead of refreshing from URL and getting the newly updated image until I restart the whole app.

Is there a way to force the Image component to refresh the displayed image, or is this some behaviour that the browser is causing? If it’s a browser caching, is there some way to force that to refresh from URL?

Simply running

myImage.source = "the_image_url.png"

after the image has been updated does not seem to work.

Thanks

I can imagine that setting the image source from one url to the same url has no effect.
Probably because the browser sees that nothing has changed.

Have you tried setting the url to None first to force a refresh?

self.image_1.source = None
self.image_1.source = <url>

Yes, I did. Well, I set the source to "" instead of None and then back to the URL again.

If that’s not working then happy to look at a clone link and make suggestions from there.

Can you add an useless parameter?
Something like domain.com/image?dummy=123.

If the server ignores that parameter, you can change the value to a random or incremental number.

I had the same problem with images served by an old app I made long time ago in cherrypy. The right way would have been to use the header to tell the client not to cache the image, but some browsers wouldn’t pay attention to that header. So I added a dummy parameter, which is ignored by the server and prevents the client from caching the image.

3 Likes

That worked, thanks! Interesting that just adding the dummy parameter on the refresh works for all subsequent refreshes, even without incrementing or changing it at all.

Weird!
… but I wouldn’t rely on it :slight_smile:

I think of that additional parameter as the version of the image.
… which it is!

1 Like