How to refresh cached image in the browser?

Wappler General Need Help
1

My script for shifting the image center works fine.

I want to adjust the image center of cropped images in the backend.

Even when I reload the query, the browser uses the image it has in its cache. So, unfortunately, I'm not seeing the latest version.

Does anyone have any ideas on how I can solve this?

2

May not be the issue but had this problem with a site i inherited from other developer. Spent hours trying different solutions.
Eventually traced the problem to the fact the site was running on a vps behind an nginx proxy which was caching everything.
Turned off proxy caching and all was well.

3

You have two options here.

  1. When editing the image, store the update timestamp in a database for example in a column called updated_at. Then pass this timestamp on the page like:
<img dmx-bind:src="image_path + '?v=' + updated_at">

this way when you reload the database query a new value will come in the updated_at and the new image will be loaded.

OR

  1. Always reload the image in the browser:
<img dmx-bind:src="image_path + '?v=' + <%= Date.now() %>">
2 Likes
4

Caution should be advised here, such technique is not in the interest of the website user. If this is a one-time thing one could add a ?r=1 (r for revision) parameter, instead of dynamically generating a new practically-random parameter every time the page is loaded

The 1st technique you suggested is way better than the 2nd, taking in consideration the user's interest :grin:

If this is in development only, people usually do CTRL+F5 to refresh without cache

1 Like
5

That’s true, but I believe it’s an admin panel and not a user-facing part of the site so it should be fine.

1 Like