FILE_URI path for Camera not working on IONIC 4

Question

When using the Cameara to take a picture with destinationType: this.camera.DestinationType.FILE_URI, the resulting URL will not work to display the image. For example, when attempting to take a photo like this:

this.camera.getPicture(options).then((url) => {
        // Load Image
        this.imagePath = url;
    }, (err) => {
        console.log(err);
    });

Attempting to display it as <img [src]="imagePath" > will result in an error (file not found).

The problem here is that the URL is in the file:///storage... path instead of the correct one based on localhost.

Answer 1

In previous versions of Ionic, this would be solved by using normalizeURL. This will not work on Ionic 4 (or at least I could not make it work).

To solve this issue, you will need to use convertFileSrc():

import {WebView} from '@ionic-native/ionic-webview/ngx';
...
this.camera.getPicture(options).then((url) => {
        // Load Image
        this.imagePath = this.webview.convertFileSrc(url);
    }, (err) => {
        console.log(err);
    });

Now the image URL will be in the appropriate http://localhost:8080/_file_/storage... format and will load correctly.

See WKWebView - Ionic Docs for more information.