Cordova: Access image in Android's cache or files folder from an html file

Question

I'm using the cordova-plugin-camera to get a picture from the album with navigator.camera.getPicture. to destinationType: destinationType.FILE_URI. This returns me a File_URI = file:///storage/emulated/0/Android/data/{app}/cache/IMG20200916194914.jpg?1600372401486 with the path that points to the cache folder where the image was saved. And I need to place that image as a div's background to be used as a wallpaper, with something like this:

$("#imageCustom").css("background-image", "url(" + imageURI + ")");

Problem is that it throws an error that says:

Not allowed to load local: resource:file:///storage/emulated/0/Android/data/{app}/cache/IMG20200916194914.jpg?1600372401486

Is there a way to get a relative path to that folder/file to be accessed by the html? Or may be moving the image to another folder and how I do that? (I copied it with resolveLocalFileSystemURL/requestFileSystem/copyTo/LocalFileSystem.PERSISTENT but only thing it does is copying it to the files folder where I have the same problem.

Thanks in advance.

Answer 1

Thanks to JM-AGMS

As posted in cordova load image file from device storage used the cdvfile protocol included in cordova-plugin-file.

1.Added cdvfile: scheme to Content-Security-Policy meta tag of the index page, e.g.:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

2.Added <access origin="cdvfile://*" /> to config.xml.

3.And used to convert the path to the images:

resolveLocalFileSystemURL(imageURI, function(entry) {
    console.log('cdvfile URI: ' + entry.toInternalURL());

    $("#imageCustom").css("background-image", "url(" + entry.toInternalURL() + ")");
    $("#imageCustom").css("display", "block");
});

resolveLocalFileSystemURL(imageURI);