External images in the Ionic default tab template won’t load in the emulator and on the device

问题

The tab app template in Ionic contains a few external images, and they won't load when I open the app in my Android emulator or my Nexus 5. Both the device and the emulatir do have internet connection and I can load these images manually in the browser.

It works OK in the browser (ionic serve).

That is:

ionic start myApp tabs
cd myApp
ionic serve # OK
ionic platform add android
ionic build android
ionic emulate android # Images are not loaded
ionic run android # Images are not loaded

ionic serve:

http://content.screencast.com/users/yuri_l/folders/Jing/media/e95e5f91-c732-414a-9ba5-adaf8a726dd5/00000064.png

Android emulator (Nexus 5):

http://content.screencast.com/users/yuri_l/folders/Jing/media/a515d587-0eea-4978-809d-b800899aa9f9/00000065.png

ionic 1.3.22 cordova 5.0.0

What I am missing?

回答1:

Here is the solution:

ionic plugin add cordova-plugin-whitelist

External resources won't load without it.

回答2:

As joeri said:

ionic plugin add cordova-plugin-whitelist

will fix the issue, Here is the api link to explain how it works. plugin API

in my cordova config.xml file I have

<access origin="*"/>

doing this Doesn't block any requests

The API explaination has a few more options if you want to restrict it more, here

来源：https://stackoverflow.com/questions/30107751/external-images-in-the-ionic-default-tab-template-won-t-load-in-the-emulator-and