-1

Let me explain more clearly. Right now I have an array of server objects through which I loop over and render the name and image of each server. Each server has a thumbnail property which contains a URL to its image - http://localhost:3000/images/servers/Test-0dbc1792-2e99-4abf-acd3-b35ede0bef9e/ef026092-ced8-4458-b7c7-5a4131dfcde7.png

Now here's my problem. Whenever I update the image of the server on the back-end, I only replace the old image on the file system with the new one. The server folder and server image do not change their names, therefore the URL to that image doesn't change.

When I return the updated server object to the front-end and replace the old server with the new one, the image of the server does not change. I believe this happens because Vue.js sees that the URL has not changed and therefore doesn't re-render the image. Even though the URL itself has not changed, it now points to a new image but that it not reflected on the front-end.

Obviously, once I refresh the page I get to see the new image but that kinda defeats the purpose of Vue.js. Any ideas how to avoid this issue? I guess I need to tell Vue.js to somehow forcefully re-render the images but I'm not sure what the trigger should be, considering the thumbnail URL doesn't change.

Onyx
  • 5,186
  • 8
  • 39
  • 86
  • This isn't a Vue problem, this is just how the browser works. It's clever enough not to request the same resource again if it thinks it already has it... To get around this, just append a random query param to the end e.g. `image.png?v=23423423` and every time you update it, change the value after `v=` as that will make a different url every time in the eyes of the browser – ProEvilz Aug 25 '20 at 14:17
  • many clever tricks here for a similar need (reloading browser-cached files): https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-js-files – fpierrat Aug 25 '20 at 14:31

1 Answers1

1

The browser caches your image for you based on the URL.

You could add a timestamp to the last part of the URL of the image (for example with a data variable in Vue)

http://localhost:3000/images/servers/Test-0dbc1792-2e99-4abf-acd3-b35ede0bef9e/ef026092-ced8-4458-b7c7-5a4131dfcde7.png?timestamp=32132131231

Update this value when the backend is done updating the images, or refresh this variable every x seconds if you don't know exactly when the backend is done updating.

Jimmy Knoot
  • 2,378
  • 20
  • 29