Ionic app is not able to load external images

ionic-v1
1

I just downloaded Ionic and compiled my first app using the tabs template. This works perfectly when tested on the local browser, but when I compile the app an run it on my android phone (Samsung Galaxy with 5.0) it is not able to load any of the external images. The only thing that I am doing different is that I am using Crosswalk which is a requirement of the project. When I request the user agent using the Chrome Dev Tools I get the following string:
Mozilla/5.0 (Linux; Android 5.0; SM-G900W8 Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.74 Mobile Crosswalk/12.41.296.5 Mobile Safari/537.36

I checked the config.xml and I do have <access origin="*"> set.

Any ideas? Ionic seems like a very nice solution otherwise.

Thanks

2

This may be a silly suggestion, but can your phone display these images from your normal browser? I.e. first check that your phone, via your data carrier, or wifi, can access the images?

3

Are you getting any errors in the console or network tab?

4

404 not found. But the images are there and reachable with the regular browser.

5

Did you try what @kevin432 mentioned above? See if you can access your localhost from the device’s browser and see if the images show up.

Could you paste some of your markup?

6

I am not able to access the development computer from my cell phone but if I enter the address of the images directy on the browser I can see them. Regarding the markup I havent modify the tab template at all.

7

So you started a tabs app using something similar to this: ionic start myApp tabs and then deployed it to a Samsung Galaxy and the external images (such as the ones on the chat tab) are giving 404 errors?

8

Exactly, as I mention above the only difference is that I am using crosswalk.

9

Just verifying the steps taken. :slight_smile:

Apparently the latest CLI update is causing these issues. See this post: http://blog.ionic.io/crosswalk-comes-to-ionic/

Issues with Crosswalk not loading external resources

Using the latest changes from Cordova Android 4.0.0, the Cordova team has removed the Whitelisting capabilities of cordova to now reside in a whitelist plugin

This plugin has not been released yet, but is required to allow whitelisting to work properly with Cordova android 4.0.

To get around this issue, please install the plugin using this command: ionic plugin add GitHub - apache/cordova-plugin-whitelist: [DEPRECATED] Apache Cordova - Whitelist Plugin.

That should temporarily get you around that issue until the Cordova team releases that plugin to the Cordova Plugin registry.

10

Thanks I’ll give it a try on monday.

11

Anyone solve this?

I’ve got the same problem: Absolute vs relative paths in app builds

But adding the whitelist plugin hasn’t solved it.

12

That is strange, it did work for me, just like it says on the blog post. Are you sure that the plugin is installed correctly?

13

Turns out my issue was something different: Absolute vs relative paths in app builds