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.

This is weird. I just tried it on Codepen.io and it worked. Does your application have the permissions for internet? — Keval, Apr 28 '15 at 07:34
Okay. Try installing this plugin - https://github.com/apache/cordova-plugin-whitelist and add `` to your **config.xml**. — Keval, Apr 28 '15 at 08:56
@Keval, Now one more, on console log getting "No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin." how to add this? — Jyoti Prakash, Apr 28 '15 at 09:26
I can access remote images, but my API calls are not returning any data. Why? — Samarth Agarwal, May 15 '15 at 14:26

Keval · Answer 1 · 2015-05-14T06:35:28.433

47

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.

edited May 14 '15 at 06:35

answered Apr 28 '15 at 10:24

Keval

3,389
2
24
41

Amazing!! My question is...What in the BGZUZ is going on with Cordova??? Why does it require this all of a sudden? Been working with ionic for over 6 months now and this pops up – Matthew Merryfull Apr 29 '15 at 08:46
Did you update your project's libraries? I've edited my answer with the reason. – Keval Apr 29 '15 at 09:10
5

Yeah I did, but if I didn't come across your post, I most likely would have torn my hair out by now. It does make sense however. But just poorly advised to the community. – Matthew Merryfull Apr 29 '15 at 12:09
better do `cordova plugin add cordova-plugin-whitelist` so you get a released version rather than the latest github code – Mirko N. May 13 '15 at 19:28
This works for me except for on my `release.apk` which is obviously a real issue! Already have my app in the App Store with this issue :( – Taylorsuk May 17 '15 at 15:44
You mean the app works fine when you're debugging, but when you build with `release` parameter, it doesn't? – Keval May 17 '15 at 17:21
I banged my head cause I thought it has something to do with cors, great answer!! – Shay Apr 16 '16 at 12:52

Z3R0 · Answer 2 · 2015-04-28T08:05:35.513

0

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

edited Apr 28 '15 at 08:05

answered Apr 28 '15 at 07:51

Z3R0

196
1
1
10

Yes this is weird, wamp, plnkr, Codepen shows that image is coming up, but when I am loading the apk in my andorid mobile using "ionic run" its giving 404 for the image. – Jyoti Prakash Apr 28 '15 at 08:34

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

2 Answers2

Linked

Related