web-dev-qa-db-de.com

Zeigen Sie Bilder durch HTML-Img-Tag mit anglejs und ionic an

Ich mache derzeit eine mobile Hybrid-App mit ionic und Angularjs und versuche, Bilder über ein img-HTML-Tag anzuzeigen. Meine Seite besteht aus einem Karussell am oberen Rand (was gut funktioniert, zeigt Bilder) und einer Liste mit kleinen Bildern. Im Controller meiner Seite gibt es: 

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

Und in meiner HTML-Seite gibt es: 

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

Wenn ich es in einem Browser anzeige, funktioniert alles gut. Wenn ich jedoch mein Smartphone probiere, funktioniert das caroussel, es zeigt Bilder an, aber die Liste zeigt nicht die Bilder. Unstead {{artwork.img}} zeigt mir alle Bilder. Ich versuche:

  1. ersetze 'ng-src' durch 'src', aber nichts passiert
  2. ersetzen Sie ng-src = "{{artwork.img}}" durch ng-src = "img/art_affiche_6_thumb-300x300.jpg", es funktioniert.

Anscheinend ist die Bindung nicht richtig gemacht ... Hast du eine Ahnung warum? Und wie kann das Problem gelöst werden?! Außerdem sieht der Pfad der Bilder auf meinem Smartphone wie "cdvfile: // localhost/persistent/..." aus. Das Karussell funktioniert gut, aber die Bildliste funktioniert nicht, und wenn ich "cdvfile: // localhost/persistent/..." in "file: // mnt/sdcard/..." übersetze, funktioniert es. Warum?!

6
user2429082

Endlich finde ich die Antwort. Das Problem liegt darin begründet, dass Angreifer XSS-Angriffe über HTML-Link mit der Funktion imgSrcSanitizationWhitelist verhindern. Dem Image-Pfad, der mit 'cdvfile: // localhost/persistent' beginnt, wird also das Präfix "unsafe:" vorangestellt, sodass das Image nicht angezeigt wird. Um dieses Problem zu umgehen, musste ich diese Methode überschreiben. Um dies in meiner Konfiguration meines Hauptmoduls zu tun, füge ich diesen Code hinzu: 

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

Die Diskussion mit der Antwort

13
user2429082

Ich hatte das gleiche Problem, aber es wurde gelöst, indem einfach auf die Bilder relativ zur index.html-Datei verwiesen wurde, nicht auf die absolute URL basierend. 

Ich hatte img src="/hello.jpg", wenn es img src="hello.jpg" sein muss. :)

4
Andrew Smith

Es gibt eine andere Situation, die dazu führen kann, dass das img-Tag nicht aufgelöst wird. Ich habe eine HTML5-Webapp auf eine Hybrid-App portiert und bin auf das oben genannte Problem gestoßen. In einer Ansicht lösen sich die img-Tags nicht auf. In meiner Routing-Initialisierung rief ich an: 

$locationProvider.html5Mode(true);

Dies scheint ein Problem zu verursachen, wenn img src in der lokalen Installation gefunden wird (es sei denn, auf Android-Geräten habe ich noch nicht auf IOS getestet). Da dieser Code nicht wirklich erforderlich ist, wenn Sie nicht in einem Browser rendern, habe ich den Code für die Hybrid-App entfernt.

0
Eric G

Ich weiß, dass das schon eine Weile her ist, aber ich habe festgestellt, dass mein Selbst das gleiche Problem mit Ionic 3 hatte.

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

zu diesem:

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

Ich hoffte, dass dies jemandem geholfen hat.

0
Vin Nwaikwu