当我更新图像但前端显示旧图像时，图像 src 会发生变化

Question

I have found weird bug in my application. I am using VueJS3 and typescript. I am creating a media gallery, where users can manage assets. All endpoints and backend side of application works perfectly. Currently i am working on updating image files(updating image field). My code works in theory, image url updates to a new one, but even the url is newer, image that is rendered is old image(before update). When i try to view my application in incognito window, my newer image is showing. But it does not work otherwise(works if and only user clears his cache) I hope i explained myself clearly, it is a little complicated :)

When i fetch the data from api, they don't have any src, so i have to create a property when using the data. Here is the code below.

const { res, err } = await this.$api.image.getAll(params)
res.data.items.forEach(async (image: Image<Populated>) => {
   image.src = this.$fileHandler(image._id)
})

Note: File handler is a special method that gives the image source by id

Answer 1

Apparently your assets get cached, and there are multiple ways to solve that.

Not diving too much into caching strategies and cache control tags, just do

image.src = `${this.$fileHandler(image._id)}?_=${+new Date()}`

This will generate a unique (almost) URL for your image, invalidating every previous cached one.