title: unable to display image from FILE URI, Ionic framework
body: <p>I am trying to display image taken from camera and displaying it to the view. I have searched for this answer on many websites but nothing worked. I have tried DomSanitizer, Base64 and even photo-library but the image returned from them is not displayed.</p>
  
  <p>My home.ts file is</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { Camera, CameraOptions } from '@ionic-native/camera';
  import { DomSanitizer } from '@angular/platform-browser';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  
    myPhoto:any;
    image;
    constructor(public navCtrl: NavController, private camera: Camera, public DomSanitizer: DomSanitizer) {
  
    }
  
    takePhoto(){
      const options: CameraOptions = {
        quality: 100,
        targetHeight: 320,
        targetWidth: 320,
        destinationType: this.camera.DestinationType.FILE_URI,
        sourceType: this.camera.PictureSourceType.CAMERA,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE
      }
  
      this.camera.getPicture(options).then((imageData) =&gt; {
       // imageData is either a base64 encoded string or a file URI
       // If it's base64 (DATA_URL):
       this.myPhoto = 'data:image/jpeg;base64,' + imageData;
       this.image = imageData;
       console.log(this.myPhoto);
       alert(this.myPhoto);
      }, (err) =&gt; {
       // Handle error
      });
    }
  }
  </code></pre>
  
  <p>Here is my home.html code</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;
        Ionic Blank
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
    &lt;button ion-button (click)="takePhoto()" &gt;Take Photo&lt;/button&gt;
  
    &lt;!-- &lt;img src="{{myPhoto}}"/&gt; --&gt;
    &lt;!-- &lt;img src="{{image}}"/&gt; --&gt;
    &lt;!-- &lt;img [src]="DomSanitizer.bypassSecurityTrustUrl(myPhoto)"/&gt; --&gt;
    &lt;!-- &lt;img data-ng-src="{{myPhoto}}"/&gt; --&gt;
    &lt;img src="data:image/jpeg;base64,file:///storage/sdcard0/Android/data/io.ionic.starter/cache/1533211220154.jpg"/&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>The commented code here is that i have tried but not succeeded.</p>