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

by

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.

More Related Contents:

  1. External resource not being loaded by AngularJs
  2. ion-content and ion-footer have different $scope
  3. CORS error for application running from file:// scheme
  4. Working with select using AngularJS’s ng-options
  5. How do I set the value property in AngularJS’ ng-options?
  6. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  7. Why Does Firebase Lose Reference outside the once() Function?
  8. How to set an iframe src attribute from a variable in AngularJS
  9. AngularJS 1.2 $injector:modulerr
  10. AngularJS – Value attribute on an input text box is ignored when there is a ng-model used?
  11. AngularJS communication between directives
  12. using AngularJS html5mode with nodeJS and Express
  13. Change format of md-datepicker in Angular Material with momentjs
  14. Angularjs $http post file and form data
  15. Resetting form after submit in Angularjs
  16. ES6 Promise not Updating AngularJS DOM [duplicate]
  17. Does Angular routing template url support *.cshtml files in ASP.Net MVC 5 Project?
  18. Angular 1 – get current URL parameters
  19. AngularJS : ng-model binding not updating when changed with jQuery
  20. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  21. Angular/UI-Router – How Can I Update The URL Without Refreshing Everything?
  22. How to delete ‘#’ sign in angular-ui-router URLs
  23. Remove ‘All Files’ option from HTML file input
  24. Jenkins error – Blocked script execution in . because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set
  25. ng-click not working in dynamically created content
  26. onDeviceReady not firing in PhoneGap hello world app
  27. Difference between $state.transitionTo() and $state.go() in Angular ui-router
  28. AngularJS Load Data from Service
  29. How do I return data from a $http.get() inside a factory in angularjs
  30. How to create an Array with AngularJS’s ng-model

Leave a Comment