Ionic lesen lokales Foto und Display

Question

Ich versuche, ein Foto aus meiner Fotogalerie anzuzeigen.

Ich verwende in meinem Fall, der HTML-Code, um das Bild

<img style="border:1px solid red;width:100%;height:400px;" 
        src="file:///storage/9016-4EF8/DCIM/Camera/20160723_134932.jpg" /> 

So zu zeigen, wird das Bild nicht angezeigt.

Auch ich verifiziert und die URL ist gültig. Ich habe den folgenden Code verwendet, um sicherzustellen, dass ich die Datei lesen kann:

 File.readAsText("file:///storage/9016-4EF8/DCIM/Camera/", "20160723_134932.jpg") 
      .then((obj) => { 
       console.log('I CAN READ THE FILE'); 
      }) 
      .catch((obj) => { 
       console.log(JSON.stringify(obj)); 
      }); 

Es gibt andere Dinge, die ich getan habe:

Changed den Meta-Tag:

<meta http-equiv="Content-Security-Policy" content="default-src * cdvfile://*; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 

Modified den Config.xml

<access origin="*"/> 
<allow-intent href="file:///*"/> 
<allow-navigation href="*://*/*"/> 

Aber immer noch nicht funktioniert, das Bild wird nicht angezeigt.

Ich habe drei Tage verloren zu versuchen, es zu tun.

Answer 1

Ich kann nicht glauben, dass ich die Lösung gefunden habe.

Wenn Sie Ionic mit --liveload ausführen, wird das Bild nicht angezeigt.

Ungewollt betreibe ich das Projekt mit dem Befehl:

ionic run --device 

Ohne "--livereload". Ich habe es getan, um meine Frage zu vervollständigen und voilà, es funktioniert.

OMG !!!!!

Also werde ich diese Frage für weitere Suchanfragen beibehalten und jemandem helfen.

Jetzt kann ich schlafen, lol.

Answer 2

Ich arbeitete um dies mit der Methode readAsDataURL in der Cordova-Datei Plugin (Cordova-Plugin-Datei). Keine Notwendigkeit, den CSP oder die config.xml zu ändern. Nur getestet mit Android-Gerät und Emulator (mit --Livereload)).

Dies ist nur ein Workaround und sollte nicht in der Produktion verwendet werden, da jedes Bild in den Speicher geladen wird.