Search code examples
angularionic-frameworkionic4capacitor

Error displaying image using Capacitor and Ionic

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

Look under the button

In the web console, I see this

Not sure why it says undefined in the URL

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.

Solution

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