Browser shows the same image after the update

If there is an image change on the same file name, say logo.png or front.jpeg, the change won’t happen right away unless you force refresh it on browser to clear the cache.
The problem with this one is when you have dynamic updates and your users couldn’t see the change right away b/c of the cache.

The simple fix for this would be appending version at the end of the file name. Like your original html would look like:

img height="200" src="/path/to/image/file.ext" 

Then appending the version at the end

img height="200" src="/path/to/image/file.ext?v=someVersionGoesHere" 

For any backend it would be easy to append the versioning when the image is presented. It could be random number or unix timestamp would work in this case too..

If you are generating the images from javascript, say based on the json response, you can do

var version = new Date()->getTime(); //get the unix timestamp
var path = "/path/to/image/file.ext?v="+version;

$('#image_id').attr('src', path);

Shall do the trick. I used jQuery her but, it is not limited to it..