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.

dr_ermio · Accepted Answer · 2018-09-02T21:20:20.100

24

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.

edited Sep 02 '18 at 21:20

answered Sep 02 '18 at 21:14

dr_ermio

811
1
10
21

1

For displaying the new convertFileSrc url in a template, I still had to use [DomSanitizer](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/3) – Low Dec 06 '18 at 12:42
1

Amazing!! It's work you saved me as well, two days I was searching :( Don't get it why Ionic team didn't make a clear documentation on such breaking changes. – excbot Feb 12 '19 at 16:20
@excbot - I imagine the reason they didn't 'make clear documentation' is because they have to prioritise the masses of work they're giving away to us all for free on this open source project. I'm sorry to come across as critical I just think it's important we respect the time and effort put in by others for no pay. – daddywoodland May 28 '19 at 13:08
@dr_ermio. It does work. One small issue though, the displaying of the image on the UI doesn't work unless I touch somewhere in the form. Any ideas why it doesn't update right away? – zulkarnain shah May 15 '20 at 07:38

score 0 · Answer 2 · answered Oct 19 '19 at 17:07

In my case, the following code works with me

const downloadFileURL = 'file:///...';

// Convert a `file://` URL to a URL that is compatible with the local web server in the Web View plugin.
const displayedImg = (<any>window).Ionic.WebView.convertFileSrc(downloadFileURL);

score 0 · Answer 3 · answered Nov 19 '19 at 23:35

In case some gots here looking for the answer on ionic4, check this out

"Not allowed to load local resource" for Local image from Remote page in PhoneGap Build

and look for the answer from @Alok Singh that's how I got it working on ionic4 and even works with livereload

score 0 · Answer 4 · answered Dec 22 '21 at 14:59

UPDATE december 2021:

You have to install the new Ionic Webview

RUN:

ionic cordova plugin add cordova-plugin-ionic-webview

npm install @awesome-cordova-plugins/ionic-webview

Import it in app.module and your page where you wanna use it:

import { WebView } from '@awesome-cordova-plugins/ionic-webview/ngx'; 
image = "";
constructor(private webview: WebView){}

Then this will work:

this.camera.getPicture(options).then((imageData) => {
 this.image = this.webview.convertFileSrc(imageData)
}, (err) => {
 // Handle error
});

And show it in the HTML page:

    <img [src]="image" alt="">

FILE_URI path for Camera not working on IONIC 4

4 Answers4