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

我目前正在使用和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"
        }
    ]
};
});

<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>

在我的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"
        }
    ]
};
});

<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>

当我在浏览器上显示它时，一切正常。但是当我试着在我的智能手机上使用caroussel时，它会显示图像，但列表中不会显示图像，除非{{artwork.img}显示所有图像。 我尝试：

将“ng src”替换为“src”，但什么也没有发生

将ng src=“{artwork.img}}”替换为ng src=“img/art_affiche_6_thumb-300x300.jpg”它可以工作

显然装订不正确。。。你知道为什么吗？怎么解决？！

---

此外，在我的智能手机上，图像的路径看起来像“cdvfile://localhost/persistent/...". caroussel很好用，但图像列表不起作用，当我翻译时”cdvfile://localhost/persistent/...“到”file://mnt/sdcard/...“它起作用了。为什么

我终于找到了答案。这个问题是由于angularjs。因此，图像路径以'cdvfile://localhost/persistent'的前缀为“不安全：”因此图像不显示。为了解决这个问题，我必须重写这个方法，为此，我在主模块的配置中添加了以下代码：

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

---

与

的讨论还有另一种情况可能导致img标签无法解决。我将一个HTML5网络应用程序移植到一个混合应用程序时遇到了上述问题，因为img标签无法解决这个问题。在路由初始化过程中，我调用了：

$locationProvider.html5Mode(true);

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

---

我也遇到了同样的问题，但通过简单地引用index.html文件中的图像，而不是基于URL的绝对引用，就解决了这个问题

---

我有

img src=“/hello.jpg”

当它需要

img src=“hello.jpg”

：）

我知道这已经有一段时间了，但我发现我自己在离子3上也有同样的问题。解决方法很简单，就是改变：

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

为此：

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

我希望这能帮助别人