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

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


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.


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