Question

我正在开发一个Ionic应用程序。下面是我的控制器的代码：

.controller('AreaListCtrl', ['$scope', '$location', '$sce', '$state', 'JsonResponseFactory', 'Loader',
function ($scope, $location, $sce, $state, JsonResponseFactory, Loader) {
    Loader.showLoading('Loading Area List ...');

    var data = [
                   { "Id": 0, "Name": "Gulsan", "ImageUrl": "http://admin-panel.studynovels.com/ContentImages/food_area_sample_1.jpg", "NumberOfRestaurants": 5 },
                   { "Id": 1, "Name": "Banani", "ImageUrl": "http://admin-panel.studynovels.com/ContentImages/food_area_sample_1.jpg", "NumberOfRestaurants": 4 },
                   { "Id": 2, "Name": "Dhanmondi", "ImageUrl": "http://admin-panel.studynovels.com/ContentImages/food_area_sample_1.jpg", "NumberOfRestaurants": 4 },
                   { "Id": 3, "Name": "Uttra", "ImageUrl": "http://admin-panel.studynovels.com/ContentImages/food_area_sample_1.jpg", "NumberOfRestaurants": 2 }
               ];

    for (var i = 0; i < data.length; i++) {
        data[i].ImageUrl = $sce.trustAsResourceUrl(data[i].ImageUrl);
    }

    $scope.userName = 'Ahmed All Razi';
    $scope.areaList = data;
    Loader.hideLoading();
}
])

我的页面代码是：

<ion-content>
    <div class="text-center" style="padding-left: 20px; padding-right: 20px;">
        <br />
        <h4 ng-show="userName">Hello, {{::userName}}</h4>
        <h6>Thank you for visiting our app. Please select your area from the list.</h6>
        <br />
    </div>

    <a class="card item" ng-repeat="area in areaList" ng-href="#/restaurantList/{{::area.Id}}">
        <h2 ng-show="area.Name">{{::area.Name}}</h2>
        <img ng-show="area.ImageUrl" ng-src="area.ImageUrl" />
        <hr />
        <h4 ng-show="area.NumberOfRestaurants">Total Restaurants {{::area.NumberOfRestaurants}}</h4>
    </a>
    <br />
</ion-content>

每个字段都正常加载，但图片未显示在页面上。

我正在获得以下输出 Screenshot Here

[注]：

我添加了白名单插件 cordova插件添加cordova-plugin-whitelist
在我的config.xml中添加了以下行
在我的index.html中添加了以下元标记

任何人都可以帮我在页面上正确渲染图像。

Answer 1

您必须使用：

<img ng-show="area.ImageUrl" ng-src="{{area.ImageUrl}}" />

在您的声明中（注意使用括号，有关更多信息，请阅读ngSrc指令https://docs.angularjs.org/api/ng/directive/ngSrc）。

Answer 2

最后我找到了解决方案。我在index.html中添加了以下元标记，它阻止图像从外部源加载：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' mythicangel.com">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org">

我刚删除该行，现在正在加载图片。谢谢大家回复。

图像未显示在Ionic Apps中的JSON URL中

2 个答案: