Ionic native camera taking picture but not showing it .i want to take picture and show it on the same page

Ionic Native
1

i am trying ion native camera api , thats takin picture as the camera shows up and i can click an image but tha image is not shoing up

i am using android oreo , ionic 3 and latest cordova and running app on a real device

<-- file home.html-->`
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button round (click)="eventofClick()">Round Button</button>

  <p><img src="{{image}}" /> </p> 
{{image}}

</ion-content>

<--home.ts-- ------------------------------------------------------>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  image: any;

  constructor(public navCtrl: NavController, public camera: Camera) {
    console.log("constructor");

  }
eventofClick() {
    console.log("called");
    console.log('inside');
    const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}


 this.camera.getPicture(options).then((imageData) => {
   // imageData is either a base64 encoded string or a file URI
   // If it's base64 (DATA_URL):
   let base64Image = 'data:image/jpeg;base64,' + imageData;
  this.image = 'data:image/jpeg;base64,' + imageData;
  }, (err) => {
   // Handle error
  });
}
}

output -
broken%20image

console log

data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.catalyst.android.safra/cache/1549019043619.jpg
8.js:856 file:///storage/emulated/0/Android/data/com.catalyst.android.safra/cache/1549019043619.jpg
8.js:857 1
vendor.js:36245 WARNING: sanitizing unsafe URL value data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.catalyst.android.safra/cache/1549019043619.jpg (see http://g.co/ng/security#xss)
1549019043619.jpg:1 GET unsafe:data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.catalyst.android.safra/cache/1549019043619.jpg 404 (Not Found)

url stack question

1 Like