Issue with Android Hybid app to display remote image with Ionic framework?

Question

I am new to Ionic. I am using Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0

Template file browse.html code:

<div class="col-50"><img ng-src="{{availableImages[currentImage].src}}" /></div>

app.js code:

.state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html",
        controller: 'Ctrl'
      }
    }
  })

controller.js code

.controller('Ctrl',function($scope) {
      $scope.currentImage = 0;
      $scope.availableImages = [
        {
          src: "http://lorempixel.com/160/160/people/3"
        }
        ];
      console.log("reading image in controller !!!");
})

Header details:

Request URL:http://lorempixel.com/160/160/people/3
Request Method:GET
Status Code:404 Not Found (from cache)
Response Headers
Client-Via:shouldInterceptRequest
Request Headers
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Mozilla/5.0 (Linux; Android 5.0.2; XT1033 Build/LXB22.46-28; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.129 Mobile Safari/537.36

Config.xml file:

  <access origin="*"/>

Error on console:

GET http://lorempixel.com/160/160/people/3 404 (Not Found)

I verified the url http://lorempixel.com/160/160/people/3 is showing image in my mobile browser. but the image is not coming on the app.

Answer 1

Whitelisting the domains using cordova-plugin-whitelist solves the issue.

Add the plugin via CLI:

cordova plugin add cordova-plugin-whitelist

and then add the following line of code to your app's config.xml:

<allow-navigation href="http://*/*" />

and

this meta tag in your index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

EDIT: The reason for this issue:

From Cordova 4.0.0 for Android's update:

Whitelist functionality is revamped

• You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist

• Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)

• Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are using CSP.

• This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate plugin (not recommended).

Note: while not strictly part of this release, the latest default app created by cordova-cli will include this plugin by default.

Answer 2

Build this plnkr: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview

My html file:

<div><img ng-src="{{ availableImages[currentImage].src }}" /></div>

Javascript:

$scope.currentImage = 0;
$scope.availableImages = [{
  src: "http://lorempixel.com/160/160/people/3"
}];

It seems that everything is alright...
Tested with angularjs 1.3.15