Question

我目前正在使用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}}则显示了所有图像。我试着：

替换＆ng; src＆＃39;由＆＃39; src＆＃39;但没有任何反应
替换ng-src =＆＃34; {{artwork.img}}＆＃34;通过ng-src =＆＃34; img / art_affiche_6_thumb-300x300.jpg＆＃34;它有效。

显然绑定没有正确制作......你知道为什么吗？怎么解决它？！此外，在我的智能手机上，图像的路径看起来像＆＃34; cdvfile：//localhost/persistent/..."。 caroussel运行良好，但图像列表不起作用，当我翻译＆＃34; cdvfile：//localhost/persistent/..." to＆＃34; 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

的讨论

Answer 2

我遇到了同样的问题，但它只是通过简单地引用相对于index.html文件的图像来解决，而不是基于URL的绝对引用。

我需要img src="/hello.jpg" img src="hello.jpg"。：）

Answer 3

还有另一种情况可能导致img标记无法解析。我正在将HTML5 webapp移植到混合应用程序并遇到上述问题，在视图中img标签不会解决。在我的路由初始化中，我正在调用：

$locationProvider.html5Mode(true);

这似乎导致在本地安装上找到img src的问题（除非在Android设备上，我还没有在IOS上测试过）。鉴于除非您在浏览器中呈现，否则不需要此代码，我已删除了混合应用程序的代码。

Answer 4

我知道这已经有一段时间了，但我发现我的自我与Ionic 3有同样的问题。它只是通过改变来解决：

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

到此：

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

我希望这有助于某人。

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

4 个答案: