HTML background url cached version of amazon S3 image-CodePudding

In my application, I save image in a S3 bucket (AWS) that are basically the preview of a menu.It helps to display the "Thumbnail" of the menu and get an overview without having to enter it. I actually update the image in S3 each time a change is made to the menu creator.

Then, if I check from the browser the url in S3, the image is well updated so the issue is not coming from s3 where the state of the image is the good one.

But in my application, where I use the url as "backgroundImage : url" the url don't get the latest version of the s3 image but the previous one (the one when we loaded the page first) . If I refresh the page, then it's fine but it's seems like the background img has "cached" the image from the url and is not really live from the content in the s3 url.

Do you know if there is a way that the url can display in real time the content of my image in my S3 bucket and not just the state at first load ?

Here is the code in my client side that is in vueJs :

 computed: {
    thumbnailStyles() {
      return {
        backgroundImage:`url(https://my-bucket.s3.eu-north-1.amazonaws.com/${this.menu.id})`,
        backgroundRepeat: 'round'
      }
    }
  },

<div :style="thumbnailStyles"></div>

Thank you in advance and don't hesitate to ask more informations if it's not clear !

CodePudding user response：

You could add a paremeter in the url like https://my-bucket.s3.eu-north-1.amazonaws.com/${this.menu.id}?ts=20220804-160000 where the ts is the date of the last change of image.