javascript - 通过带有angularjs和ionic的html img标签显示图像

Question

我目前正在使用 ionic 开发混合移动应用程序和 Angularjs，我正在尝试通过 img html 标签显示图像。我的页面由顶部的旋转木马(效果很好，它显示图像)和包含小图像的列表组成。在我页面的 Controller 中有:

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

在我的 html 页面中有:

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

当我在浏览器上显示它时一切正常。但是当我在我的智能手机上尝试时，轮播可以工作，它显示图像，但列表不显示图像，而不是 {{artwork.img}} 向我显示所有图像。我尝试:

1. 将“ng-src”替换为“src”，但没有任何反应
2. 将 ng-src="{{artwork.img}}"替换为 ng-src="img/art_affiche_6_thumb-300x300.jpg"它有效。

显然绑定(bind)不正确......你知道为什么吗？又是怎么解决的？!此外，在我的智能手机上，图像的路径看起来像“cdvfile://localhost/persistent/...”。传送带运行良好，但图像列表不起作用，当我将“cdvfile://localhost/persistent/...”翻译为“file://mnt/sdcard/...”时，它起作用了。为什么？!

Answer 1

我终于找到了答案。问题是由于angularjs prevent XSS attacks via html link with the function imgSrcSanitizationWhitelist .因此以“cdvfile://localhost/persistent”开头的图像路径以“unsafe:”为前缀，因此图像不会显示。为了解决这个问题，我不得不重写这个方法，在我的主模块配置中添加这个代码:

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

与 answer 的讨论