"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.

Answer 2

Something to note here for future users who run into this, be sure you are NOT running in 'Live Reload' mode when testing a feature like this. Live Reload will result in this same error message which is clearly misleading. After building w/o live reload everything worked fine for me using the file:/ OR cdv:/ path.