Images not loading on device or emulator

Ionic Framework ionic-v3
1

I am working on something that loads images from internet to cards, this is working fine on browser. But on device and emulator images are not loading and doesn’t loop through ng-repeat i am using JSON data with Urls. I want to load images from Urls.

Here is Code

<ion-content ng-controller="FileController" ng-init="loadImages()">
  <!-- <button class="button" ng-click="shareAnywhere()">Share anywhere</button> -->
  <div class="row responsive-md">
    <div class="row" ng-repeat="image in myJsonData" >
      <div class="col col-100" ng-if="$index < myJsonData.length">
         <div class="list card" id="dailyDose-card21">
          <div class=" item item-image">
            <img ng-src="{{myJsonData[$index].url}}" ng-click="download('{{myJsonData[$index].url}}')" width="100%" class="image"/>
          </div>
          <div class="item item-body" id="dailyDose-list-item-container2"></div>
          <button id="dailyDose-button1" style="color:#6D6D6D;font-size:-1px;" class="button button-positive  button-icon icon ion-android-share-alt" ng-click="download('{{myJsonData[$index].url}}')"></button>
          <button id="dailyDose-button2" class="button button-light  button-icon icon ion-android-download"></button>
        </div>
      </div>

    </div>
  </div>

Here is how it looks in browser

image
Capture.PNG408×603 311 KB

Here is how it looks in device

image

Please Help Me Out.

2

Use the remote debugging in Chrome or Safari to look at your console. The url is probably off by a leading /

Chris

3

Thanks for replying @ChrisGriiffith , Can i do this remote debugging thing with an emulator? and how?

4

Yea remote debugging will work the same for connected physical devices as well as emulators running on the machine. Look at this documentation from google for instructions.

5

There is also Ionic specific documentation on that: https://docs.ionic.io/tools/developer/

6

Did you try in production mode?

image