remote image not loading in cordova

Question

i have whitelisted the url also added <access origin="*" /> in config.xml but image are not showing in the hybrid app. It is showing in the browser but not showing in app.

I searched everywhere and tried everything as mentioned but it is not working. However, local images are showing fine.

<img width="35" height="30" id="profile-pics" class="profile img-circle" name="profile-pics" src="http://www.example.com/img/53_20160713104002.png">

config.xml

<access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-navigation href="http://www.test.com/*" />
    <allow-navigation href="http://www.example.com/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>

Is it not showing in iOS, Android or both? If it's iOS, it may be an [app transport security issue.](http://stackoverflow.com/questions/30731785/how-do-i-load-an-http-url-with-app-transport-security-enabled-in-ios-9) — Adam, Nov 14 '16 at 19:02
This suddenly happened to me as well. Any idea why it worked before, without any code changes? — Remi Sture, Jun 05 '17 at 13:47
@RemiSture what is the error you are getting? What is happening. You need to explain a bit. its hard to understand the issue. — Roxx, Jun 08 '17 at 02:27
I suddenly got '403 Forbidden' for images loaded from Facebook via Firebase Auth. A workaround was to fetch the images from graph.facebook.com manually, so my problem was most likely not whitelisting/content-security-policy related. — Remi Sture, Jun 08 '17 at 06:38

score 10 · Accepted Answer · answered Nov 15 '16 at 03:34

10

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

It fixed the issue. Just added in the head section.

answered Nov 15 '16 at 03:34

Roxx

3,738
20
92
155

score -1 · Answer 2 · answered Jul 01 '17 at 17:07

I had the exact issue but even when adding the meta tag to the head the images would not load due to a CORS dom error 18. I found this link https://github.com/niklasvh/html2canvas/pull/374 that lead me to try adding a string to the end of the image source to prevent caching of the image and it worked!

var src = 'https://example.com/images/test.jpg'; 
img.src = src  + this.createRequestString() + "?request=" + (new Date().getTime()) + (Math.random() * 50000);

remote image not loading in cordova

2 Answers2