web-dev-qa-db-fra.com

Afficher les images avec le tag html img avec angularjs et ionic

Je suis en train de faire une application mobile hybride avec ionic et Angularjs et j'essaie d'afficher des images avec une balise HTML img. Ma page est composée d'un caroussel en haut (qui fonctionne bien, il affiche des images) et d'une liste avec de petites images. Dans le contrôleur de ma page, il y a: 

app.controller('SalleCtrl', function ($scope,$location) {

$scope.salle = {
    "num": "2",
    "imgR": [
        "img/art_affiche_6_thumb-300x300.jpg",
        "img/art_affiche_6_thumb-300x300.jpg"
    ],
    "title": "Salle 2 : Premières peintures",
    "_audio_guide": [],
    "_audio_guide_fe": [],
    "_audio_guide_en": [],
    "artworks": [
        {
            "img": "img/art_affiche_6_thumb-300x300.jpg",
            "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-14-2/",
            "title": "Oeuvre 14"
        },
        {
            "img": "img/art_affiche_9_thumb-300x300.jpg",
            "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-3/",
            "title": "Oeuvre 3"
        }
    ]
};
});

Et dans ma page html il y a: 

<ion-view title="{{salle.title}}">

<ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" id="" >
    <ul rn-carousel class="image">
         <li ng-repeat="image in salle.imgR" style="background-image:url({{ image }});background-color:black;background-repeat:no-repeat;background-position:center center;background-size : contain;"> 
        </li>
    </ul>

    <div class="list">
        <a ng-repeat="artwork in salle.artworks" class="item item-avatar" href="{{artwork.href}}">
          <img ng-src="{{artwork.img}}">
          <h2>{{artwork.title}}  {{artwork.img}}</h2>   
        </a>
    </div>

</ion-content>

Lorsque je l’affiche sur un navigateur, tout fonctionne bien. Mais lorsque j'essaie sur mon smartphone, le caroussel fonctionne, il affiche des images, mais la liste ne les affiche pas. Un {{artwork.img}} me montre toutes les images. J'essaie de:

  1. remplace 'ng-src' par 'src' mais rien ne se passe
  2. remplacez ng-src = "{{artwork.img}}" par ng-src = "img/art_affiche_6_thumb-300x300.jpg" cela fonctionne.

Apparemment, la reliure n'est pas faite correctement ... Avez-vous une idée de pourquoi? Et comment le résoudre?! De plus, sur mon smartphone, le chemin des images ressemble à "cdvfile: // localhost/persistent/...". Le caroussel fonctionne bien, mais la liste d'images ne fonctionne pas et lorsque je traduis "cdvfile: // localhost/persistent/..." en "fichier: // mnt/sdcard/..." cela fonctionne. Pourquoi?!

javascriptjqueryhtmlangularjs
6
user2429082

Je trouve enfin la réponse. Le problème est dû au fait que angularjs empêche les attaques XSS via un lien html avec la fonction imgSrcSanitizationWhitelist . Donc, le chemin de l'image qui commence par 'cdvfile: // localhost/persistent' est préfixé par "unsafe:" et ainsi, l'image n'est pas affichée. Afin de contourner ce problème, je devais surcharger cette méthode, pour le faire dans la configuration de mon module principal, j'ajoute le code suivant: 

var app = angular.module( 'myApp', [] )
     .config( ['$compileProvider',function( $compileProvider ){ 
         $compileProvider.imgSrcSanitizationWhitelist(/^\s(https|file|blob|cdvfile):|data:image\//);
       }
     ]);

La discussion avec le répondre

13
user2429082

J'avais le même problème, mais le problème a été résolu en référençant simplement les images par rapport au fichier index.html, et non en référence absolue à l'URL. 

J'ai eu img src="/hello.jpg" quand il doit être img src="hello.jpg". :)

4
Andrew Smith

Une autre situation peut empêcher la balise img de se résoudre. Je portais une application Web HTML5 sur une application hybride et j'ai rencontré le problème ci-dessus, mais les balises img ne seraient pas résolues. Dans mon initialisation de routage, j'appelais: 

$locationProvider.html5Mode(true);

Cela semble poser un problème pour trouver img src sur l'installation locale (à moins que sur un périphérique Android, je n'ai pas testé sur IOS). Étant donné que ce code n'est pas vraiment requis, sauf si vous effectuez un rendu dans un navigateur, j'ai supprimé le code de l'application hybride.

0
Eric G

Je sais que cela fait longtemps, mais je me suis retrouvé avec le même problème avec Ionic 3. Il a été résolu simplement en changeant:

    <img ng-src="{{artwork.img}}">

pour ça:

    <img ng-src={{artwork.img}}>

J'espérais que cela aiderait quelqu'un.

0
Vin Nwaikwu