选择后，离子不显示图库中的照片

Question

I am trying to get a photo from the gallery to be displayed on my screen, the page I am working on is a tab page, using the following code I can open the photo gallery and select the image, however, the image never gets displayed on the screen unless I switch tabs, any idea on how to fix this will be much appreciated.

import { Component } from '@angular/core';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

@Component({
selector: 'app-sign-reader',
templateUrl: './sign-reader.page.html',
styleUrls: ['./sign-reader.page.scss']
})


export class SignReaderPage {
    myImage = null;

  constructor() {}

  async takePicture() {
   const image = await Camera.getPhoto({
  quality: 90,
  allowEditing: false,
  resultType: CameraResultType.Uri,
  source: CameraSource.Photos
    });

this.myImage = image.webPath;
  }

}

here is the HTML code:

<ion-header>
<ion-toolbar color="primary">
  <ion-title>
    Capacitor PWA
  </ion-title>
   </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-button (click)="takePicture()" expand="block">
  <ion-icon name="camera" slot="start"></ion-icon>
  Capture image
   </ion-button>

  <ion-img *ngIf="myImage" [src]="myImage"></ion-img>
 </ion-content>

Ionic:

Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework
: @ionic/angular 5.6.7 @angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8 @angular/cli
: 10.0.8 @ionic/angular-toolkit : 2.3.3

Capacitor:

Capacitor CLI : 3.0.0 @capacitor/android : 3.0.0
@capacitor/core : 3.0.0 @capacitor/ios : 3.0.0

Utility:

cordova-res : not installed globally
native-run (update available: 1.4.0) : 1.3.0

System:

NodeJS : v14.15.4 (/usr/local/bin/node) npm : 6.14.10 OS
: macOS Big Sur

Answer 1

Remember having a similar issue. Using Base64 instead of URI solved it for me.