Error displaying image using Capacitor and Ionic

Question

I am trying to write a simple Camera app using Ionic 4 and here is my code snippet for capturing the image and displaying it in an Ionic tab.

export class UploadPage {
  yourImage: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {  }

  async captureImage() {
    const capturedImage = await Plugins.Camera.getPhoto(
    {
      quality: 90,
      allowEditing: true,
      source: CameraSource.Camera,
      resultType: CameraResultType.Uri
    });

    this.yourImage = this.sanitizer.bypassSecurityTrustResourceUrl(capturedImage && (capturedImage.dataUrl));

    }
  }

When I try to run the code, it looks like it's capturing the image ok but it's not displaying in the browser. I see this

In the web console, I see this

The image doesn't show up in devapp as well.

The weird thing is, when I tested this out on an Android phone, the image saved fine on the disk but it still doesn't show on the page.

Answer 1

If you use resultType Uri you have to use capturedImage.webPath to display the url, the dataUrl is undefined unless you se resultType DataUrl