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

Question

I'm hosting my webpages for a phonegap build app. I'd like to use the camera to upload a photo, and show a preview the image, basically doing this:

<img src="file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg" height="500" />

Because my pages are hosted I'm getting this error:

Not allowed to load local resource: file:///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg", source: https://www.myapp.com/v5.5/imager.html#

I assume that this is some CORS problem, so I've added this to the html of the page

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

and this to my config.xml (I'm using Phonegap Build)

 <plugin name="cordova-plugin-whitelist" source="npm" />

 <allow-navigation href="*" />
 <allow-navigation href="*://*/*" />
 <allow-navigation href="file:///*/*" />
 <allow-navigation href="http://*/*" />
 <allow-navigation href="https://*/*" />
 <allow-navigation href="data:*" />

 <allow-intent href="*" />
 <allow-intent href="http://*/*" />
 <allow-intent href="https://*/*" />
 <allow-intent href="tel:*" />
 <allow-intent href="sms:*" />
 <allow-intent href="mailto:*" />
 <allow-intent href="geo:*" />

 <access origin="*" />
 <access origin="*://*/*" />
 <access origin="file:///*" />
 <access origin="cdvfile://*" />
 <access origin="content:///*" />

As you can see I've tried every setting I can think of, from scouring the web. Am I missing something obvious?

Thanks in advance.

Answer 1

OK finally got a workaround, which is to convert the file:/// URI to a cdvfile:// URI, which my page only complains is a mixed content warning, and does allow me to access!

function getFileEntry(imgUri) {
            window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {
                console.log("got file: " + fileEntry.fullPath);
                console.log('cdvfile URI: ' + fileEntry.toInternalURL());
                $('#imgPreview').attr("src", fileEntry.toInternalURL());
            });
        }

Would still be nice to have a proper way to access file:/// URIs, I can see cases where this wouldn't work, but for what I'm doing this is resolved.