Base64 coded pictures not displayed in iOS 10

Ionic Framework ionic-v3
1

Dear all,

I got stuck with this. Please take a look and tell me what wrong with my code. Thanks

The taken picture cannot be display with the code in .html file

      <img src="{{base64Image}}" alt="">

      <img [src]="base64Image" *ngIf="base64Image" />

To make the pictures displayed, i have to do a workaround solution as setting the attribute 'src' of the <img id="camera-image" />

Here are code in .html file:

<ion-content padding>
  <img id="camera-image" />
      
      <img src="{{base64Image}}" alt="">

      <img [src]="base64Image" *ngIf="base64Image" />

      <ion-fab bottom right>
        <button ion-fab color="secondary" (click)="takePicture()"><ion-icon name="camera"></ion-icon></button>
      </ion-fab>
    </ion-content>

And here is code in .ts file

    takePicture(){
    let options = {
      destinationType: Camera.DestinationType.DATA_URL,
      targetWidth: 500,
      targetHeight: 500,
      quality: 100,
      allowEdit: true,
      correctOrientation: false,
      saveToPhotoAlbum: true,
      // mediaType: 0
    };
    Camera.getPicture(options)
    .then((imageData)=>{
      this.base64Image = "data:image/jpeg;base64," + imageData;

      let cameraImageSelector = document.getElementById('camera-image');
      cameraImageSelector.setAttribute('src', this.base64Image);
    })
    .catch(err=>{
      console.log(err);
    })
 }

My code was stored at

2

Dear all,

I found that base64Image cannot be displayed properly in ionicView.
After building in ios, it works well