"Lokale Ressource darf nicht geladen werden" für lokales Bild von Remote-Seite in PhoneGap Build

Question

Ich hosste meine Webseiten für eine phonegap build app. Ich möchte die Kamera ein Foto hochladen und zeigen das Bild eine Vorschau, im Grunde dies zu tun:

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

Weil meine Seiten gehostet werden ich diesen Fehler:

Nicht erlaubt lokale Ressource zu laden: Datei: ///storage/emulated/0/Android/data/com.myapp.myapp/cache/1470418568917.jpg“, Quelle: https://www.myapp.com/v5.5/imager.html#

ich gehe davon aus, dass dies einige CORS Problem ist, so Ich habe dies dem HTML der Seite hinzugefügt

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

und diese zu meiner config.xml (Ich verwende 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:///*" /> 

Wie Sie mich, dass ich mich vorstellen kann jede Einstellung versucht haben sehen können, von der Web-Scheuern. Fehle ich etwas offensichtlich?

Vielen Dank im Voraus.

Answer 1

OK habe endlich einen Workaround, der die Datei: /// URI in einen cdvfile: // URI konvertiert, was meine Seite nur beschwert, ist eine gemischte Inhaltswarnung und erlaubt mir den Zugriff!

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()); 
      }); 
     } 

Wäre trotzdem schön sein, eine richtige Art und Weise zu haben Datei zuzugreifen: /// URIs, kann ich Fälle sehen, wo dies nicht funktionieren würde, aber für das, was ich das tue gelöst ist.

Answer 2

Hier ist etwas zu beachten für zukünftige Benutzer, die darauf stoßen, stellen Sie sicher, dass Sie NICHT im 'Live Reload' Modus laufen, wenn Sie eine Funktion wie diese testen. Live Reload wird zu derselben Fehlermeldung führen, die eindeutig irreführend ist. Nach dem Aufbau ohne Live-Nachladen funktionierte alles gut für mich mit der Datei:/ODER CDV:/Pfad.

Answer 3

Ich habe vor kurzem dasselbe Problem konfrontiert. Es wird angezeigt, dass die cordova ios-App intern auf localhost: 8080 ausgeführt wird. Dies ist der Hauptgrund, warum Dateien vom "file: //" -Protokoll nicht geladen werden können.

einfache Lösung - "var workingPath = window.Ionic.normalizeURL (givenPath)";

Bitte Artikel von IONIC darüber gelesen - https://ionicframework.com/docs/wkwebview/