Yes in any case you need to change the HTML tag so for instance as you already said:
< img ng-repeat="image in images" img-cache ic-src="{{urlForImage(image)}}" style="height:200px; padding: 5px 5px 5px 5px;" / >
If I were you I would replace only one of your image tags and check if it works then. If it still doesn’t work then you won’t have wasted time with replacing all your image tags. If it works however then of course you proceed to modify all of your other image tags to use ng-img-cache.
In your app.js, you first add “ImgCache” as an Angular module, so for instance:
angular.module('app', [
// libraries
'ionic',
// angular-imgcache
'ImgCache',
// ................................. etcetera
])
and (also in app.js) you add a config-function like this:
.config(function (ImgCacheProvider) {
ImgCacheProvider.setOptions({
debug: true, // you can set this to false for a production app
chromeQuota: 25 * 1024 * 1024, /* allocated cache space : here 25MB instead of the default 10MB */
usePersistentCache: true
});
// ImgCache library is initialized automatically, but set this option if you are using platform like Ionic -
// in this case we need init imgcache.js manually after device is ready
ImgCacheProvider.manualInit = true;
})
and finally in your “run” function (also in app.js) you add this to your “ionic platform ready” handler:
.run(function ($ionicPlatform, $log, ImgCache) {
$ionicPlatform.ready(function () {
$log.info('IONIC PLATFORM READY');
ImgCache.$init();
// .......... etcetera
Finally, in your index.hrml you include the 2 necessary JS libraries, BELOW ionic bundle and ABOVE cordova:
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/imgcache.js/js/imgcache.js"></script>
<script src="lib/angular-imgcache/angular-imgcache.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
That should be it …