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

Question

我目前正在使用离子和Angularjs 进行混合移动应用程序,我正试图通过img html标签显示图像.我的页面由顶部的caroussel(效果很好,显示图像)和带有小图像的列表组成.在我的页面的控制器中有:

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. 用'src'替换'ng-src'但没有任何反应
2. 用ng-src ="img/art_affiche_6_thumb-300x300.jpg"取代ng-src ="{{artwork.img}}"它有效.

显然绑定没有正确制作......你知道为什么吗？怎么解决它？!此外,在我的智能手机上,图像的路径看起来像"cdvfile:// localhost/persistent/...".caroussel运行良好,但图像列表不起作用,当我将"cdvfile:// localhost/persistent/..."翻译为"file:// mnt/sdcard/..."时,它可以工作.为什么？!

Answer 1

我终于找到了答案.问题是由于angularjs 通过与imgSrcSanitizationWhitelist函数的html链接阻止了XSS攻击.所以以'cdvfile:// localhost/persistent'开头的图像路径是"unsafe:"的前缀,因此不显示图像.为了解决这个问题,我不得不重写这个方法,为了在我的主模块的配置中做到这一点,我添加了这个代码:

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

与答案的讨论