Setting image src to file_uri angular ripple

First of, i am a newbie to Angular/ionic. I am trying to learn how to use native features using plugins, the camera plugin to be specific.

  • I am currently testing my code on ripple emulator ( i am still a newbie and far away from actual device testing)

    the platform is ios (not sure if switching to android would make a difference)

The ripple emulator shows me a screen with file selection dialog when i call the getpicture function and returns a URI for the image selected.

Here is my problem: I set image src to the ImageURI (blob:http%3A//localhost%3A4400/df84a835-ed01-41ea-a58e-bdc171a22e87), but the image fails to show up. I don't think its an issue with data binding/resolving, coz if i hardcode a url instead of imageuri, then the code works as expected.

Any suggestions/pointers would be appreciated.

UPDATE 1

First off, thank you so much guys for taking the time to help me!! Unfortunately, none of these seem to work :( BTW, the platform is cordova, not ios. Sorry for that mistake. The funny thing is that, if i open the blob url in my browser, then i am able to see the image. But not in the emulator. Here are the screenshots, if that would help: link link Thanks once again!!

HTML:

          <img ng-hide="ImagePreview == null"  ng-src="{{ImagePreview}}">

CONTROLLER:

           $scope.GetImageCamera = function() {
           var CameraOptions = {
            quality : 75,
            destinationType : Camera.DestinationType.FILE_URI,
            sourceType : Camera.PictureSourceType.CAMERA,
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 100,
            targetHeight: 100,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: true
        };

        $cordovaCamera.getPicture(CameraOptions).then(function(imageURI) {
            $scope.ImagePreview = imageURI;
            $scope.$apply();
        }, function(err) {
           alert("Error!");
        });
    };

Try this:

$cordovaCamera.getPicture(CameraOptions).then(function(imageData) {
           $scope.ImagePreview = "data:image/jpeg;base64," + imageData;
            }, 
             function(err) {
                // An error occured. Show a message to the user
            });

Instead of imageURI call imageData.

Try this, it should be the right way. In iOS you have to change a bit the URL of the image path to manipulate.

$cordovaCamera.getPicture(onSuccess, onFail, { quality: 50,
   destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
   var image = document.getElementById('myImage');
   image.src = imageURI;
}

function onFail(message) {
   alert('Failed because: ' + message);
}

iOS :

$scope.imagen.substr($scope.imagen.lastIndexOf('/') + 1);

So finally, I used Ion view and see that my code works as expected (the camera opens up and the image captured is visible on the app.) This leads me to believe that the problem is with ripple and not the code itself. BTW, in case you haven't, checkout ion view. Its the closest thing to on-device testing without actually having to build, register as an ios developer etc.

thanks and cheers!!