我目前正在使用
ionic和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}}则显示所有图像.
我试着 ：
>用’src’替换’ng-src’但没有任何反应
>替换ng-src =“{{artwork.img}}”由ng-src =“img / art_affiche_6_thumb-300×300.jpg”它有效.
显然绑定没有正确制作……你知道为什么吗？怎么解决它？！
此外,在我的智能手机上,图像的路径看起来像“cdvfile：// localhost / persistent / …”. caroussel运行良好,但图像列表不起作用,当我将“cdvfile：// localhost / persistent / …”翻译为“file：// mnt / sdcard / …”时,它可以工作.为什么？！
解决方法
我终于找到了答案.问题是由于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的讨论
