Ionic Cordova & Capacitor : How to Display Native Camera Plugin FILE URI path in Image tag

Here steps for display the camera plugin FILE URI image path inside image tag for both Ionic cordova and capacitors.  

Cordova :

Ionic 3 :

Step 1: 

getPicture(sourceType: PictureSourceType) {

    this.camera.getPicture({

      quality: 50,

      destinationType: this.camera.DestinationType.FILE_URI,

      encodingType: this.camera.EncodingType.JPEG,

      sourceType: sourceType,

      saveToPhotoAlbum: false,

      correctOrientation: true

    }).then((imageData) => {

      this.image = (<any>window).Ionic.WebView.convertFileSrc(imageData);

    });

  }

Step 2: 

<ion-img [src]="image"></ion-img>

Ionic 4 :

Step 1: 

Install ionic-webview package.

npm i  @ionic-native/ionic-webview

Step 2:

import {WebView} from '@ionic-native/ionic-webview/ngx';

getPicture(sourceType: PictureSourceType) {

    this.camera.getPicture({

      quality: 50,

      destinationType: this.camera.DestinationType.FILE_URI,

      encodingType: this.camera.EncodingType.JPEG,

      sourceType: sourceType,

      saveToPhotoAlbum: false,

      correctOrientation: true

    }).then((imageData) => {

      this.image = this.webview.convertFileSrc(imageData);

    });

  }

 Step 3: 

<ion-img [src]="image"></ion-img>

Capacitor :

Step 1 : 

Need to Import capacitor core package.

import { Capacitor } from '@capacitor/core';

Step 2 : 

Then we can convert the FILE URI path using convertFileSrc method.

getPicture(sourceType: PictureSourceType) {

    this.camera.getPicture({

      quality: 50,

      destinationType: this.camera.DestinationType.FILE_URI,

      encodingType: this.camera.EncodingType.JPEG,

      sourceType: sourceType,

      saveToPhotoAlbum: false,

      correctOrientation: true

    }).then((imageData) => {

      this.image = Capacitor.convertFileSrc(imageData);

    });

  }

 Step 3 : 

<ion-img [src]="image"></ion-img>