How to access local file path in ionic 4

Add Image Using Local File Path in ionic 4

Currently, the Ionic 4 version has lots of changes to access the file, you can't access the local file directly.  you need to follow current changes Webview and also add Domsanitizer helps to prevent Cross-Site Scripting bugs.

Common Problem observing that user use camera method to access the local file in ionic - It returns three types of destination  

1. DATA_URL

2. FILE_URI

3. NATIVE_URI

I recommend using FILE_URI to get the image path. After getting Image Let's Follow My Step.
1.  import two modules in component or page (e.g image-modal.component.ts)

import { DomSanitizer } from '@angular/platform-browser';

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

Now Assign Webview & DomSanitizer in the component constructor.

constructor(private sanitizer: DomSanitizer, public webview: WebView){
console.log("constructor gitsof.com")}
    
      

Add Image Code (Given Below) in the HTML section of a component 

<p style="text-align: center ;  padding:0px !important ;  margin :0px !important"> 
    <img style="height: 223px  !important ;  object-fit:contain ;" [src]="fixImage()" alt="HHH"> </p>

      

Finally, add 'fix Image' Function Given below. It enables to excess local file path of an image.

 fixImage() {
    console.log("fix Im=ageData a")
    let imageOption = this.webview.convertFileSrc(this.modalData.modalFilePath)

    return this.sanitizer.bypassSecurityTrustUrl(imageOption)

  }

      

• Additional Knowledge,  The same scenario to be used to access local video but only change in the image tag to video tag.