Image in image component not updating when source is a permalink

Anvil Q&A
1

**What I’m trying to do:**I’m reading a bunch of permalinks urls into image components. The actual images in the permalinks change every minute but this change is not reflected on the frontend.

**What I’ve tried and what’s not working:**When I manually change the permalink url on the app_table, the frontend image changes accordingly. I also tried to convert the permalink into a media object and use the url of the media object as source for the image component. This still doesn’t lead to change in the displayed image when the permalink image has actually changed. Refreshing data bindings only change the other data from the same app_table that contains the image source url. But the images don’t change.

Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

I’m not sure, but the first thing I can think of is a non-anvil problem, browsers automatically cash images to the same url for a certain period of time.

Your approach of changing the data that the underlying link points to might not work no matter what.

If you want to test it, try waiting until your image is supposed to have changed, and then do a hard refresh on your browser with Ctrl-F5 (Or Command% F5 on a mac I think, not sure).

If it does change like you are expecting, the browser is cashing the image based on the url it points to, and won’t attempt to re-download a new image from that url for some time (days, weeks, etc).

1 Like
3

…so here is an idea, what if you build a function on the page to reload the image by:

  1. passing the link to the server module in anvil
  2. having the server module download the image file from the link you passed to it using the requests python library
  3. using the bytes string generated by the requests library to build a media object
  4. passing the media object back to the user form
  5. using the media object to build a new image component
  6. removing the old image component and then adding the new one

:thinking:

You could even have this run on an anvil timer, maybe? (hide the loading spinner)

1 Like
4

Thanks so much @ianb for your suggestions. I have confirmed that the issue is indeed due to browser caching. I will now follow the suggestion in your second post and report back

5

For steps 1-3, I used anvil.BlobMedia(content=anvil.URLMedia().get_bytes()). However, this always produced the same url for the media object and did not resolve the issue. By supplying a randomly generated string to the name argument of anvil.BlobMedia(name=random_str), I was able to get new unique url for the media object and it worked as expected. Didn’t require steps 4-6. Thanks again @ianb for pointing me in the right direction!

2 Likes
6

I like that random url name idea for avoiding those extra component rebuilds, glad it worked.

1 Like