How to load image from android local storage

1

Hi There, please first have a look into my controller code:

$cordovaImagePicker.getPictures(options)
.then(function (results) {
if(results.length>0){
$scope.showSlide=true;
console.log($scope.showSlide);
for (var i = 0; i < results.length; i++) {

    $cordovaFile.moveFile(cordova.file.cacheDirectory, $scope.urlForImage(results[i]), cordova.file.dataDirectory)
  .then(function (success) {
        console.log("Native URL: "+ success.toURL());
        
  $scope.slides.push({"filepath":success.toURL()});
  }, function (error) {
   console.log(error);
  });
   
    
  }
   
  }
}, function(error) {
  // error getting photos
});

}

I am using cordova ImagePicker plugin for selecting images from device gallery. Image picker transfers image into application cache, so that I used the $cordovaFile.moveFile function for moving image files into app’s files directory. This is process is being done successfully, because console.log("Native URL: "+ success.toURL()); is returning the following log:

05-20 12:49:53.746: I/chromium(2128): [INFO:CONSOLE(367)] “Native URL: file:///data/data/com.tricon.studios.ultimatefishing/files/IMG_20150508_2128442031445074.jpg”, source: file:///android_asset/www/js/controllers.js (367)

image path is being stored by using this code $scope.slides.push({“filepath”:success.toURL()});
In my view I am using following code for image slide:

    <div><img ng-src="slide.filepath">
        
    </div>
    </ion-slide>

</ion-slide-box>

But at this stage I am getting broken image icon. Can somebody figures out what I am doing wrong or how to load image form localstorage?

Thanks & Regards,
Farhan Ahmed.

2

I made a tutorial on this case: The Complete Guide To Images With Ionic

Especially the loading of a local image might be interesting for you:

HTML

<img ng-src="{{urlForImage(image)}}"/>

Controller

$scope.urlForImage = function(imageName) {
  var trueOrigin = cordova.file.dataDirectory + imageName;
  return trueOrigin;
}
1 Like
3

If anyone is still interested into this problem.

You CAN’T use Image Picker URI and display it inside an img tag, it will not work. On the other hand, you can convert that URI into BASE64 string and then inject it into img tag.

To convert Image Picker URI to BASE64 string use this Cordova plugin: https://github.com/hazemhagrass/phonegap-base64

window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){  // Encode URI to Base64 needed for contacts plugin
    $scope.collection.selectedImage = base64;
});

Then just display it like this:

<img ng-src="{{collection.selectedImage}}">

###Click here for a working example.

4

hello, how do i use this to work with an array of images ?

It doesnt seem to work… Any ideas ?

5

its not working in android
help me

6

Hey! I’m using here the window.imagePicker.getPictures(...) with base64 encode and… seems to show up tiny thumbnails like if the images were missing or something:

image
Screenshot_2017-02-24-12-07-56.png1080Ă—1920 38.9 KB

So, what am I missing? Thanks in advance!

7

I used these commands

ionic cordova platform remove android
ionic cordova platform add android

so solve the error of the broken image icon and the plugin image picker functioned correctly again.

8

hello,
Is your file getting saved? In case yes, may be the mediascanner is not triggered before you do a read of the file. Since the mediascanner is not triggered, so content provider wont have the entry for your file (your file is not indexed).In case your file is getting saved with “saveIamgeToLocalStore”, then trigger mediascanner from code once like this:

sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED, Uri
.parse(“file://”
+ Environment.getExternalStorageDirectory())));
and then do a read on the file. It should work.