Camera - Returned Image Data Problem

Ionic Framework ionic-v3
1

Hi guys,

I’m struggling to get my app to display the base64 images that get returned from the getPicture method. Would appreciate any help since this ones had me scratching my head for a few hours and I think I’m going insane.

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);
  });
}

The following is what I see in the app:

image
zyhzg.jpg1080×195 8.94 KB

2

use src=“data:image/jpeg;base64,’ + {{image}}”

3

Thank you so much. Can’t believe I didn’t try that in the first place.

Slight typo in your code though. It should be

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