web-dev-qa-db-fra.com

Problème avec l'application hybride Android pour afficher une image distante avec Ionic Framework?

Je suis nouveau dans Ionic . J'utilise Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0 

Fichier modèle code browse.html: 

<div class="col-50"><img ng-src="{{availableImages[currentImage].src}}" /></div>

app.js code:

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

contrôleur.js code

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

Détails d'en-tête:

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

Fichier Config.xml:

  <access Origin="*"/>

Erreur sur la console:

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

J'ai vérifié que l'URL http://lorempixel.com/160/160/people/3 affiche l'image dans mon navigateur mobile. mais l'image ne vient pas sur l'application.

javascriptangularjscordovaionichybrid-mobile-app
15
Jyoti Prakash

La liste des domaines utilisant cordova-plugin-whitelist résout le problème. 

Ajoutez le plugin via CLI:

cordova plugin add cordova-plugin-whitelist

puis ajoutez la ligne de code suivante dans le fichier config.xml de votre application:

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

et

cette balise meta dans votre index.html

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

EDIT: La raison de ce problème:

À partir de Cordova 4.0.0 pour la mise à jour d'Android:

La fonctionnalité de la liste blanche est revue

  • Vous devrez ajouter le nouveau plugin cordova-plugin-whitelist pour continuer à utiliser une liste blanche.

  • La définition d'une politique de sécurité du contenu (Content-Security-Policy - CSP) est désormais prise en charge et constitue la méthode recommandée pour la liste blanche (voir les détails dans le fichier lisez-moi du plug-in).

  • Les requêtes réseau sont bloquées par défaut sans le plugin. Installez ce plugin même pour autoriser toutes les requêtes, et même si vous êtes en utilisant CSP.

  • Cette nouvelle liste blanche est améliorée pour être plus sécurisée et configurable, mais le comportement de la liste blanche ancienne est toujours disponible via un fichier .__ séparé. plugin (non recommandé).

Remarque: bien que ne faisant pas strictement partie de cette version, la dernière application par défaut créé par cordova-cli inclura ce plugin par défaut.

44
Keval

Construisez cette plnkr: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview

Mon fichier html:

<div><img ng-src="{{ availableImages[currentImage].src }}" /></div>

Javascript: 

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

Il semble que tout va bien ...
Testé avec angularjs 1.3.15

0
Z3R0