Base 64 Image not view in Image tag. Ionic 2

#1

Hi im trying to view image get from phone gallery.but code returned correct base 64 format of image but its not viewing in the html page

import {Page, NavController, Alert,Platform} from 'ionic-angular';
import {NgZone} from 'angular2/core';

@Page({
  templateUrl: './build/pages/admin_page/admin_page.html'
})

export class AdminPage{
  pages: String = "pages";
  tags: String = "tags";
  _zone: any;
  platform:any;
  is_image_loaded:boolean = false;
  fbPages:String[] = ['h', 'g'];

  constructor(platform:Platform,_zone : NgZone){
    this.image = null;
    this.platform = platform;
    this._zone = _zone;
  }

  stpSelect(value: String){
    console.log('select', value);
  }

  getImage(){

    this.platform.ready().then(() => {
      let options = {
        quality: 80,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        saveToPhotoAlbum: false
      };
      // https://github.com/apache/cordova-plugin-camera#module_camera.getPicture
      navigator.camera.getPicture(
        (data) => {
          let imagedata = "data:image/jpeg;base64," + data;

          console.log('image 64', imagedata);

          this.s_image_loaded = true;

          this._zone.run(()=> this.image =imagedata);

        }, (error) => {
          alert(error);
        }, options
      );
    });
  };

}

im showing image in html tag like this

<ion-card>
    <img [src]="image">
  </ion-card>

but nothing showing.

#2

Add cordova plugin add cordova-plugin-camera

module.controller(‘PictureCtrl’, function($scope, $cordovaCamera) {

document.addEventListener(“deviceready”, function () {

var options = {
  quality: 50,
  destinationType: Camera.DestinationType.DATA_URL,
  sourceType: Camera.PictureSourceType.CAMERA,
  allowEdit: true,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: 100,
  targetHeight: 100,
  popoverOptions: CameraPopoverOptions,
  saveToPhotoAlbum: false,
  correctOrientation:true
};

$cordovaCamera.getPicture(options).then(function(imageData) {
  var image = document.getElementById('myImage');
$src.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
  // error
});

}, false);
});

#4

i tried this but not showing image in the html

#6

Place this in your html > <img Src="{{Src}}"/>

#7

@kosalam2 try using ionic-native, our successor to ngCordova. This was build to make this whole process much easier.

npm install ionic-native --save

http://ionicframework.com/docs/v2/native/Camera/