Avoid image caching in browser in React

2.3k Views Asked by At

I have a code where the user's avatar is fetched from the backend. Now, the avatar file name is the same every time, even if a user uploads a new one because the backend replaces the old avatar with the new one with the same name. Since this was causing caching issue on the browser, I used [IMAGE_URL]?random={new Date().getSeconds()} to update the state immediately when user changes it. But this causes the avatar to download multiple times when the page loads or when a React state updates. Is there a way so that the image is not cached and also I don't have to put some random query strings?

1

There are 1 best solutions below

1
On

you have to implement a hash mechanism on your backend to add a hash string to the image name not on the client side