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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With