Ionic Framework Image Not Loading

Question

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?

When you open it in chrome, do you see any errors in the console or network tab? — TZHX
– TZHX, Commented Aug 31, 2015 at 8:58
No, there are no errors. And when I inspect the element the url is corrent. — Caffeinatedwolf
– Caffeinatedwolf, Commented Aug 31, 2015 at 9:07
In image tag you wrote spell mistake as scr instead of src..please check it even if it will not work mean's reply me — Anil kumar
– Anil kumar, Commented Aug 31, 2015 at 10:08
in <img tag you spelled mistake it should src but you kept as scr as <img scr="placehold.it/80x80"> — Anil kumar
– Anil kumar, Commented Aug 31, 2015 at 12:10

Anil kumar · Accepted Answer · 2015-08-31 10:19:49Z

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.

Nadeem Khoury · Accepted Answer · 2015-08-31 12:06:51Z

1

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

Cheers

answered Aug 31, 2015 at 12:06

Nadeem Khoury

9378 silver badges18 bronze badges

Collectives™ on Stack Overflow

Ionic Framework Image Not Loading

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related