I have to display a user’s profile picture in his profile section. When a user changes his profile the new profile image doesn’t change unless I refresh the page. This was the issue of caching since I used the same name for the new picture as the old one. The URL string will not change, the content in that link will be changed. To tackle the issue I added a query param with a value of Date.now(). So the react could detect the change and render it.

Now the real issue is when the user’s profile image is Google profile image(which I am getting from Google auth) the image doesn’t show. But if I copy the URL including the query param I can view it in another tab without any issues. The problem is only for the “img” element.

the image doesnt show here...

<img
    src={`${user?.profile_image}?${new Date().getTime()}` as string}
    alt=""
    className=" rounded-3xl w-60 h-60   object-cover "
/>

If I remove the data value after ? , there are no issues.

this is the URL…..

it can be seen from the browser tab with the query element

https://lh3.googleusercontent.com/a/ACg8ocK40EAX_9-mxjxUW5S_Gg5PlC91JSF1qpm6ULVzQZE5EsE2Aw=s96-c?1722854614884