how to cache image using ionic angular mobile app?

Question

I have home page it contains with list of 2 images i have given controller and Html code.every time home page images loading from backend i want to cache the image in local to avoid every time http request and weekly once or 10 days once i want to check from backend if backend image has changed that time i need to update this cache image . i have followed some example but i could not solve this because i am new to this technology some one help me out to move forward

.controller('TestCtrl', [
    '$scope', '$http', '$location', '$window', '$ionicLoading',
    function($scope, $http, $location, $window, $ionicLoading) {
	       
        $scope.find = function() {
	     $http.get('****').success(function(data, status, headers, config, response) {
                
                $scope.image1 = data[0].Images1;
                $scope.image2 = data[1].Images2;
                
            })
        }
           
    }
])
//console i am getting image1:http://res.cloudinary.com/dl34322/image/upload/q_58/v1437810617/store1.png image2:http://res.cloudinary.com/dl34322/image/upload/q_58/v1437810617/store2.png

<ion-view  title="Home" data-ng-controller="TestCtrl" data-ng-init="find()">	
<ion-content>

<div class="list card">
  <div class="item item-image">
     <img src="{{image1}}">
  </div>
</div>
<div class="list card">
  <div class="item item-image">
     <img src="{{image2}}" >
  </div>
</div>
</ion-content> 
</ion-view >

@reptilicus Can yo please be more specific? maybe show an example code? — Vandervidi
– Vandervidi, Commented Nov 12, 2015 at 20:31

Dheeraj Vepakomma · Accepted Answer · 2016-06-21 10:41:00Z

3

Try using ng-src instead of src in <img> elements as shown below:

 <ion-view  title="Home" data-ng-controller="TestCtrl" data-ng-init="find()">   
    <ion-content>

    <div class="list card">
      <div class="item item-image">
         <img ng-src="{{image1}}">
      </div>
    </div>
    <div class="list card">
      <div class="item item-image">
         <img ng-src="{{image2}}" >
      </div>
    </div>
    </ion-content> 
    </ion-view >

edited Jun 21, 2016 at 10:41

Dheeraj Vepakomma

29k18 gold badges86 silver badges107 bronze badges

answered Apr 12, 2016 at 12:09

Kaushik Shirodkar

411 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dheeraj Vepakomma Over a year ago

Please call out what changes you've made to the code. It's hard to see at a glance that you've used ng-src.

Hardik Vaghani · Accepted Answer · 2016-06-21 12:43:17Z

1

You can use $ImageCacheFactory to cache images once and load it from cache when you need to load that again. Full documentation here

answered Jun 21, 2016 at 12:43

Hardik Vaghani

2,18330 silver badges48 bronze badges

Collectives™ on Stack Overflow

how to cache image using ionic angular mobile app?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related