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.
1 Answer
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);'/>
5 Comments
C-Rad
this works well except for the fact that I am doing it within an ng-repeat. which causes the $digest method to run continuously. perhaps there is a better way to do it than what I am. <img data-ng-src='api/image/{{image.id}}?{{getTimeStamp()}}' data-ng-click='editImage($index);'/>
Dalibor
I used this method elsewhere in ASP.MVC, or in vanilla javascript, but in angularjs it doesn't seem to work. I get img "something.jpg" to show, but "something.jpg?12345" displays blank img with height 0.
Shimon Rachlenko
@Dalibor That was almost 4 years ago, things may have changed since then...
Dalibor
Well things might change in angular2, but this is still angularJS and I use Ionic framework v1, not v2.
MandarK
Awesome method! Works like a charm
srcof the image element to image's data-url (the type of data returned by for example canvas'toDataURLmethod). and when I call the server to crop the image, the server would return new image data, which I then would reassign.