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