title: Error displaying image using Capacitor and Ionic
body: <p>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. </p>
  
  <pre><code>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 &amp;&amp; (capturedImage.dataUrl));
  
      }
    }
  </code></pre>
  
  <p>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 </p>
  
  <p><a href="https://i.stack.imgur.com/45nMH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/45nMH.png" alt="Look under the button"></a></p>
  
  <p>In the web console, I see this </p>
  
  <p><a href="https://i.stack.imgur.com/CwdEy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CwdEy.png" alt="Not sure why it says undefined in the URL"></a></p>
  
  <p>The image doesn't show up in devapp as well. </p>
  
  <p>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.</p>