Wyświetlanie obrazów za pomocą znaczników html img z angularjs i ionic

Question

Aktualnie robię hybrydową aplikację mobilną z ionic i Angularjs i próbuję wyświetlać obrazy poprzez znacznik img html. Moja strona składa się z caroussel u góry (który działa dobrze, wyświetla obrazy) i listy z małymi obrazami. W regulatorze mojej stronie znajduje się:

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

A w mojej strony html istnieje:

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

Kiedy wyświetli go na wszystko przeglądarki działa dobrze. Ale kiedy próbuję na moim smartfonie działa caroussel, wyświetla obrazy, ale lista nie pokazuje obrazów, niepotrzebnie {{artwork.img}} pokaż mi wszystkie obrazy. próbuję:

1. zastąpić 'NG-src' przez 'src', ale nic się nie dzieje
2. zastąpić NG-src = "{{artwork.img}}" NG-src = "img/art_affiche_6_thumb -300x300.jpg "Działa.

Wygląda na to, że wiązanie nie jest prawidłowo wykonane ... Masz pojęcie, dlaczego? I jak to rozwiązać ?! Ponadto na moim smartfonie ścieżka obrazów wygląda jak "cdvfile: // localhost/persistent/...". Caroussel działa dobrze, ale lista obrazów nie działa, a kiedy przetłumaczyć "cdvfile: // localhost/persistent/..." na "file: // mnt/sdcard/..." to działa. Czemu?!

Answer 1

W końcu znajduję odpowiedź. Problem wynika z faktu, że angularjs prevent XSS attacks via html link with the function imgSrcSanitizationWhitelist. Tak więc ścieżka obrazu zaczynająca się od "cdvfile: // localhost/persistent" jest przedrostkiem "unsafe:", więc obraz nie jest wyświetlany. Aby obejść ten problem miałem zastąpić tę metodę, aby to zrobić w moim config mojego głównego modułu dodać ten kod:

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

dyskusji z answer

Answer 2

Jest jeszcze inna sytuacja, że może spowodować, że znacznik img nie zostanie rozwiązany. Przesyłałem aplikację webową HTML5 do aplikacji hybrydowej i napotkałem powyższy problem w widoku, w którym znaczniki img nie zostaną rozwiązane. W moim inicjalizacji routingu I wołał:

$locationProvider.html5Mode(true); 

Wydaje się, aby spowodować problem ze znalezieniem img src zainstalować na lokalnym (chyba na Android urządzenia, jeszcze nie testowane na iOS). Biorąc pod uwagę, że ten kod naprawdę nie jest wymagany, chyba że renderujesz w przeglądarce, usunąłem kod dla aplikacji hybrydowej.

Answer 3

---

miałem ten sam problem, ale został rozwiązany poprzez zwykłe odniesienie obrazy w stosunku do pliku index.html, nie absolutne bazowanie na podstawie adresu URL.

Miałem img src="/hello.jpg", kiedy musi być img src="hello.jpg". :)

Answer 4

Wiem, że minęło trochę czasu, ale ja sam znalazłem ten sam problem z Ionic 3.Został rozwiązany poprzez zmianę:

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

do tego:

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

Mam nadzieję, że to pomogło kogoś.