Disable image cache in AngularJS

Question

I've written a directive that allows the user to upload photos then displays them. the user can then click on one of those displayed images and crop it using Jcrop. After the user is done cropping the image, the information is sent to the server, is parsed, then the image is cropped and put back in the db. this new cropped image has the same reference as it did before; the original image is overwritten. This is all done on a spring server. I need to figure out how to get the image to refresh and display the new cropped image. The main issue is that the image and the request (I think) are both cached. I'm fairly new to angular and don't know a lot about the caching factory process.

Answer 1

You can add a random argument to image URL - this will prevent caching in most browsers. This technique is called cache busting. You will have to change the value of this argument each time the image changed for this to work.

Update

Save timestamp in some variable and change it only when image has changed.

Eg. This will call the getTimeStamp() function which will generate the current timestamp and act as a cache buster.

<img data-ng-src='api/image/{{image.id}}?{{getTimeStamp()}}' data-ng-click='editImage($index);'/>