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

【问题标题】：Display images through html img tag with angularjs and ionic通过带有 angularjs 和 ionic 的 html img 标签显示图像
【发布时间】：2014-08-06 10:36:14
【问题描述】：

我目前正在使用 ionic 和 Angularjs 做一个混合移动应用程序，我正在尝试通过 img html 标签显示图像。我的页面由顶部的轮播（效果很好，它显示图像）和带有小图像的列表组成。在我页面的控制器中有：

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" 即可。

显然绑定不正确...你知道为什么吗？以及如何解决？！此外，在我的智能手机上，图像的路径看起来像“cdvfile://localhost/persistent/...”。旋转木马效果很好，但图像列表不起作用，当我将“cdvfile://localhost/persistent/...”翻译成“file://mnt/sdcard/...”时它可以工作。为什么？！

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案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的讨论

【讨论】：

【解决方案2】：

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

当它需要img src="hello.jpg" 时，我有img src="/hello.jpg"。 :)

【讨论】：

【解决方案3】：

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

$locationProvider.html5Mode(true);

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

【讨论】：

【解决方案4】：

我知道这已经有一段时间了，但我发现自己在使用 Ionic 3 时遇到了同样的问题。只需更改即可解决：

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

到这里：

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

我希望这对某人有所帮助。

【讨论】：