ngCordova Camera ImageURI showing broken image after taking the picture

Question

I am trying to invoke the camera and get the path of the taken picture to send it to my FTP.

I am getting error when I use chrome://inspect like

   GET data:image/png;base64,file:///storage/sdcard0/Android/data/com.ionicframework.camera108827/cache/1462163674353.png net::ERR_INVALID_URL 

I have successfully invoked the camera and taken the picture but I am getting the broken image.

here is my code fore getting the image path of my taken picture.

.controller('mycontroller',function($scope,$cordovaCamera){

  $scope.takePicture = function(){

    var options = { 
            quality : 75, 
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit : false,
            encodingType: Camera.EncodingType.PNG,
            targetWidth: 250,
            targetHeight: 250,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };

        $cordovaCamera.getPicture(options).then(function(imageURI) {
            //$scope.image = "data:image/jpeg;base64," + imageData;
            console.log('invokeing cordovaCamera');
            $scope.image = "data:image/png;base64," + imageURI;
            console.log($scope.image);
            console.log(imageURI);

            //$scope.apply();
        }, function(err) {
            // An error occured. Show a message to the user
        });

    };

  });

in my index.html

<ion-content ng-controller="mycontroller">
        <img ng-show="image !== undefined" ng-src="{{image}}">
        <img ng-show="image === undefined" ng-src="http://placehold.it/250x250">
        <button class="button" ng-click="takePicture()">Take Picture</button>
      </ion-content>

Answer 1

The problem is on the this line

$scope.image = "data:image/png;base64," + imageURI;

It should be like this

$scope.image =  imageURI;