Image not showing from JSON URL in Ionic Apps

Question

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

I have added the whitelist plugin cordova plugin add cordova-plugin-whitelist
Added following line in my config.xml
Added the following meta tag into my index.html

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

Press F12 to go into developer tools, reload the page, watch the console for errors, also Inspect the <img> element and see if it points to the right URL in the src attribute. — GONeale
– GONeale, Commented Mar 10, 2016 at 6:44
I am getting an "404 not found" error for the images because the request has been sent to "localhost:8100/area.ImageUrl". How to load the image from the original url? — Ahmed All Razi
– Ahmed All Razi, Commented Mar 10, 2016 at 6:52
first test it by printing the value to html element then put it to src tag — Prasad
– Prasad, Commented Mar 10, 2016 at 9:22

GONeale · Accepted Answer · 2016-03-10 06:54:02Z

2

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

answered Mar 10, 2016 at 6:54

GONeale

26.5k22 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ahmed All Razi Over a year ago

Hi, I tried this {{area.ImageUrl}} but it didn't work and in this case the blank thumbnail is not showing on my pages.

GONeale Over a year ago

It should work, what does the src value say in inspecting the element now?

Prasad Over a year ago

always use angular loop angularforEach loop with angular related stuff . while you are iterating objects angular for each is finer option than for loop .. it should load img as per GONeale answer docs.angularjs.org/api/ng/function/angular.forEach

Ahmed All Razi · Accepted Answer · 2016-03-10 16:22:22Z

1

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.

answered Mar 10, 2016 at 16:22

Ahmed All Razi

738 bronze badges

3 Comments

GONeale Over a year ago

Well, it also wouldn't have worked unless you specified {{area.ImageUrl}} so I would appreciate if you tick my answer as accepted :)

Ahmed All Razi Over a year ago

yes offcourse ... i forgot to mention ... thank you once again ... and I am sorry that I do not have enough point to give you a '+1' ...

GONeale Over a year ago

Sorry I mean can you tick my answer, I don't think you get points for ticking your own anyway. But that's fine if you wish to leave this one as ticked.

Collectives™ on Stack Overflow

Image not showing from JSON URL in Ionic Apps

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related