CODEWITHSUNDEEP
angularjsionic-framework
Caffeinatedwolf
Caffeinatedwolf

Reputation: 1307

Ionic Framework Image Not Loading

I have this code.

<ion-item ng-repeat='item in videos' class="item-thumbnail-left item-text-wrap">
        <img scr="http://placehold.it/80x80">
</ion-item>

I am trying to load an image from placehost.it but it is not loading the image. I have added

<access origin="*" />

the above code to my config.xml file. But it is still not loading when I open it on chrome. I have also enabled COR. What shall I do?

Upvotes: 0

Views: 1047

Answers (2)

Nadeem Khoury
Nadeem Khoury

Reputation: 937

try to use ng-src becaue you are importing from website, not locally.

Cheers

Upvotes: 1

Anil kumar
Anil kumar

Reputation: 928

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.

Upvotes: 1

Related Questions