我目前正在使用 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}} 向我显示所有图像。 我尝试:
- 将“ng-src”替换为“src”，但没有任何反应
- 将 ng-src="{{artwork.img}}"替换为 ng-src="img/art_affiche_6_thumb-300x300.jpg"它有效。
显然绑定(bind)不正确......你知道为什么吗？又是怎么解决的？! 此外，在我的智能手机上，图像的路径看起来像“cdvfile://localhost/persistent/...”。传送带运行良好，但图像列表不起作用，当我将“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 的讨论
关于javascript - 通过带有angularjs和ionic的html img标签显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24246464/