Cordova loading remote images


#1

Good day!

May I ask how are image tags loaded?

I’ve been seeing a lot of examples using /img src='http://remote/url.png" but it doesn’t seem to work when I build it in cordova into an android device.

Regards
Ysrael


#2

If the device is running Anrdoid <4.4 this is because the WebView can’t keep up (4.4 uses ChromeView). I’ve run tests against a range of devices from 4.3 down and this is a consistent issue (especially with larger file sizes) - in all frameworks (jqueryMobile, Wink, Ionic…Sencha not so much). Switch your runtime to Crosswalk and this will clear up immediately. Note that if you if you are using an expression for the source you should be using ng-src.


#3

Thank you very much your reply is highly appreciated, what is your opinion on using the file api instead?

I don’t think adding 18mb to our very simple app would be ideal


#4

You wouldn’t need Cordova’s File API if you have a subfolder in your assets/www folder and just use a relative path for the img src. In other words, if the images are not dynamic then there’s no reason to serve them remotely. Spend some time in Photoshop and compress/package them. Now if they are dynamic you should be using some type of provider when the app bootstraps itself to immediately fetch those images and store them using the File API. I even do this for large JSON payloads (1mb +) or various session related binaries (avatars, attachments, whatever) immediately after the authentication success (for a non-auth app this would be after the SplashScreen I imagine). But still you will probably run into the same issue where the image does not display on the device (but displays fine in emulator/hosted). Again, Android’s WebView just cannot keep up.


#5

Does using ng-src improve matters?