Can you please share how are you implementing it in your app.
Here is an example, open the developer console and type a query, you will see that the second time when you type the same query the images will be loaded from the cache
Ok thanks will have a look at it now.
No nothing! I can even use your directive. I dont know whats wrong.
Ok! Working with your directive, how do I test if the image is being loaded from cache or source?
easy, on the browser open the developers tools (Google Chrome) and on the console you should see something like this:
INFO: File 15041743119_8f6217cf32_m.jpg loaded from cache
Well I donāt see anything like that.
I have created a directive.js and placed your code in this file. Then I have included it in the index.html as external source. And specified ng-cache custom directive for the image tag. Anything else?
Hi I am new to ionic frame work. Please share some sample code for caching image locally.
Directive :
(function(angular) {
"use strict";
var ngImgCache = angular.module('ngImgCache', []);
ngImgCache.directive('ngCache', function() {
return {
restrict: 'A',
link: function(scope, el, attrs) {
attrs.$observe('ngSrc', function(src) {
ImgCache.isCached(src, function(path, success) {
if (success) {
ImgCache.useCachedFile(el);
} else {
ImgCache.cacheFile(src, function() {
ImgCache.useCachedFile(el);
});
}
});
});
}
};
});
})(angular);
Using it inside markup:
<img ng-src="path/to/image" ng-cache >
Adding ng-cache attribute will automatically cache the image in local storage. Hope this helps
ok i will try now. thank you
Let me know if you have any problem. Make sure you include the imageCache.js file and inject ngImageCache =.
https://github.com/chrisben/imgcache.js/blob/master/js/imgcache.js
Why using a cache plugin instead of browser cache?
If you have file-uploads or something like that -> store creation date of the file and put ā?CREATIONDATEā at the end of the filtepath and the browser will cache the image until another (newer) one is uploaded.
Maybe somebody can clearify.
whether there is any prossibility to store the image permanently? i want to store the image and display the image. how to do this in ionic
its working fine. but i want to store the image in sd and display those image. how to do this?
Hey All,
If youāre trying to get this setup in your app currently and running into an issue, it might be due to the fact that the most recent version of ImgCache seems to have a slight bug where it assumes that the DomHelpers should be using the āelement.getAttribute(attrName)ā syntax for accessing the āsrcā attributes on elements regardless of which version of AngularJS youāre using.
I was able to get around this by changing the lines of code in the DomHelpers section.
I changed them from thisā¦
if (ImgCache.jQuery || ImgCache.jQueryLite) {
over to thisā¦
if (ImgCache.jQuery || ImgCache.jQueryLite || element.attr !== undefined) {
ALSOā¦
Iām just wondering if anyone can confirm that this approach works with Ionic/Cordova on both iOS AND Android? I assume that it does, as the plugins used underneath are all meant to support both platformsā¦ But Iām just checking. 
Thanks!
you should store your appdata in your app namespace -> thatswhy the plugin stores the images in your app directory.
I do not think you will get access to your sd card with phonegap that easy.
I have used the current angular version and everything works fine?
And manipulating original packages is never a good idea.
If you find a bug -> report it or create a pull request on github with your solution.
I think you misunderstood my question, but I tested things myself and it works on both iOS and Android.
Also, in reference to the manipulation of original packages ā Iāve handled all of that.
I got this awesome thing working but it fails on IOS device and Safariā¦ so a huge waste of time. I should have read up on it first.
Anyone know of a solid approach that works on all platforms?