Problema con l’app Android Hybid per visualizzare immagini remote con framework Ionic?

Sono nuovo di Ionic. Sto usando Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0

Codice del file browse.html codice:

codice app.js :

 .state('app.browse', { url: "/browse", views: { 'menuContent': { templateUrl: "templates/browse.html", controller: 'Ctrl' } } }) 

codice controller.js

 .controller('Ctrl',function($scope) { $scope.currentImage = 0; $scope.availableImages = [ { src: "http://lorempixel.com/160/160/people/3" } ]; console.log("reading image in controller !!!"); }) 

Dettagli intestazione :

 Request URL:http://lorempixel.com/160/160/people/3 Request Method:GET Status Code:404 Not Found (from cache) Response Headers Client-Via:shouldInterceptRequest Request Headers Provisional headers are shown Accept:image/webp,*/*;q=0.8 User-Agent:Mozilla/5.0 (Linux; Android 5.0.2; XT1033 Build/LXB22.46-28; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.129 Mobile Safari/537.36 

File config.xml :

   

Errore sulla console:

 GET http://lorempixel.com/160/160/people/3 404 (Not Found) 

Ho verificato l’URL http://lorempixel.com/160/160/people/3 che mostra l’immagine nel mio browser mobile. ma l’immagine non sta arrivando sull’app.

La whitelist dei domini tramite la whitelist plug-in di cordova risolve il problema.

Aggiungi il plugin tramite CLI:

 cordova plugin add cordova-plugin-whitelist 

e quindi aggiungi la seguente riga di codice al file config.xml della tua app:

  

e

questo meta tag nel tuo index.html

  

EDIT: il motivo di questo problema:

Da Cordova 4.0.0 per l’aggiornamento di Android:

La funzionalità della white list è stata rinnovata

  • Dovrai aggiungere il nuovo plug-in di plug-in per il whitelist di cordova per continuare a utilizzare una whitelist

  • L’impostazione di un Content-Security-Policy (CSP) è ora supportata ed è il metodo consigliato per la lista bianca (vedi i dettagli nel readme del plugin)

  • Le richieste di rete sono bloccate di default senza il plugin, quindi installa questo plugin anche per consentire tutte le richieste, e anche se stai usando CSP.

  • Questa nuova whitelist è stata migliorata per essere più sicura e configurabile, ma il comportamento di whitelist legacy è ancora disponibile tramite un plugin separato (non consigliato).

Nota: sebbene non sia strettamente parte di questa versione, l’ultima app predefinita creata da cordova-cli includerà questo plugin per impostazione predefinita.

Costruisci questo plnkr: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview

Il mio file html:

 

Javascript:

 $scope.currentImage = 0; $scope.availableImages = [{ src: "http://lorempixel.com/160/160/people/3" }]; 

Sembra che tutto vada bene …
Testato con angularjs 1.3.15