Ahmed All Razi
Ahmed All Razi

Reputation: 73

Image not showing from JSON URL in Ionic Apps

I am developing an Ionic apps.Here below is the code of my controller:

.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();
}
])

And the code for my page is:

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

Every field is loading fine but image is not showing on page.

I am getting the follwing output Screenshot Here

[Note]:

  1. I have added the whitelist plugin cordova plugin add cordova-plugin-whitelist

  2. Added following line in my config.xml

  3. Added the following meta tag into my index.html

Can anyone help me to render the images properly on page.

Upvotes: 1

Views: 1578

Answers (2)

Ahmed All Razi
Ahmed All Razi

Reputation: 73

Finally I found the solution. I added the following meta tag in my index.html which blocked the images to loading from external sources:

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

I just removed that line and image is loading now. Thanks everyone for responding.

Upvotes: 1

GONeale
GONeale

Reputation: 26484

You must use:

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

in your declaration (note the use of parenthesis, for more information read up on the ngSrc directive https://docs.angularjs.org/api/ng/directive/ngSrc).

Upvotes: 2

Related Questions