Visualizzazione immagini tramite tag html img con angularjs e ionico

Question

Attualmente sto facendo un'app mobile ibrida con ionic e Angularjs e sto provando a visualizzare le immagini tramite un tag img html. La mia pagina è composta da un caroussel in alto (che funziona bene, visualizza le immagini) e una lista con piccole immagini. Nel controllore della mia pagina si trova:

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" 
     } 
    ] 
}; 
}); 

E nella mia pagina html si trova:

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

Quando ho visualizzare su una cosa del browser funziona bene. Ma quando provo sul mio smartphone, il caroussel funziona, visualizza le immagini, ma l'elenco non mostra le immagini, invece di {{artwork.img}} mostrami tutte le immagini. provo a:

1. sostituire 'ng-src' da 'src' ma non succede nulla
2. sostituire ng-src = "{{}} artwork.img" di NG-src = "img/art_affiche_6_thumb -300x300.jpg "Funziona.

Apparentemente la rilegatura non è stata eseguita correttamente ... Avete qualche idea del perché? E come lo risolvono ?! Inoltre sul mio smartphone, il percorso delle immagini appare come "cdvfile: // localhost/persistent/...". Il caroussel funziona bene, ma l'elenco di immagini non funziona e quando traduco "cdvfile: // localhost/persistent/..." in "file: // mnt/sdcard/..." funziona. Perché?!

Answer 1

Finalmente trovo la risposta. Il problema è dovuto al fatto che angularjs prevent XSS attacks via html link with the function imgSrcSanitizationWhitelist. Quindi il percorso dell'immagine che inizia con "cdvfile: // localhost/persistent" è prefisso da "non sicuro:" e quindi l'immagine non viene visualizzata. Al fine di ovviare a questo problema che ho avuto per ignorare questo metodo, per farlo nel mio config del mio modulo principale aggiungo questo codice:

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

La discussione con il answer

Answer 2

C'è un'altra situazione che può causare la mancata risoluzione del tag img. Stavo eseguendo il porting di una webapp HTML5 su un'app ibrida e ho riscontrato il problema sopra, in una vista i tag img non si risolvono. Nel mio percorso di inizializzazione mi stava chiamando:

$locationProvider.html5Mode(true); 

Questo sembra causare un problema trovare lo src img sulla installazione locale (a meno che il dispositivo Android, non ho ancora testato su IOS). Dato che questo codice non è realmente necessario a meno che non si esegua il rendering in un browser, ho rimosso il codice per l'app ibrida.

Answer 3

---

ho avuto lo stesso problema, ma è stato risolto con la semplice riferimento alle immagini relative al file index.html, non assoluto riferimento in base alla URL.

Avevo img src="/hello.jpg" quando deve essere img src="hello.jpg". :)

Answer 4

So che è stato un po 'di tempo, ma ho trovato il mio stesso problema con Ionic 3.E 'stato risolto semplicemente cambiando:

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

a questo:

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

speravo che questo ha aiutato qualcuno.