Search code examples
ionic-frameworkcameraionic2getpicture

Ionic 2 - Base 64 image not displayed when taking picture


This ones had me scratching my head for a few hours and its driving me insane now.

When I click the 'Take Picture' button, the camera opens as expected, but the imageData that gets returned does not display in the app.

Take Picture HTML

<ion-item (click)="takePicture()">
  Take Picture
  <ion-icon item-right name="camera"></ion-icon>
</ion-item>

Display Pictures HTML

<img *ngFor="let image of images" [src]="'data:image/jpeg;base64,' + image">

Take Picture Method

images: string[] = [];

takePicture() {
  Camera.getPicture({
    quality: 50,
    destinationType: Camera.DestinationType.DATA_URL,
    targetWidth: 1000,
    targetHeight: 1000
  })
  .then(imageData => {
    this.images.push(imageData);
  });
}

Error in App Array has data. It's just broken :(


Solution

  • Got an answer from the Ionic forum and this worked for me. Still not sure why my code wasn't working...

    src="data:image/jpeg;base64,{{image}}"