using ionic framework,local image display perfectly in chrome but not in my android phone

Question

I am new to ionic framework.I wanted use slide box in my app and changed the background pictrue in css.I use both local images and images from external link.all the images can be shown perfectly in chrome,but when i open the APK in my Samsung note two phone,no pictrues,even the local image didn't display. I tried to install whitelist plugin.But it pop application error when i installed the APK. I add this in config.xml

 <access origin="*"/>

that's my index.html code

 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width";
      content="default-src *; img-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

that's my tab-photo.html code

<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)" active-slide="model.activeIndex" delegate-handle="delegateHandler">
  <ion-slide>
    <div class="box blue">
      <img src="http://ww4.sinaimg.cn/thumb300/006sZhgkjw1fb5fr6jpbfj30w01kwk26.jpg">
    </div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow">
      <img src="assets/h.jpg">
    </div>
  </ion-slide>
  <ion-slide>
    <div class="box pink">
      <img src="assets/hh.jpg">
    </div>
  </ion-slide>
</ion-slide-box>

that's my style.css code

.circular {
width: 150px;
height: 150px;
border-radius: 50%;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border: solid;
background: url(../assets/duck%20cai.jpg) no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;

}

to be honest,I am not sure about the use of the whitelist plugin,does local image also need to get the permit? thank you all,help i could sovle the problem before DDL12.31.TOT

Answer 1

Try to debug your app in runtime by debugging your app while running. Use chrome to inspect your app on Android and safari for iOS.

You can ref. to below links for more about how to debug your web app with chrome.

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Comment below for more assistance.

Cheers!!

Answer 2

I still can not find out why all the local images can not display on my phone.but I used all the pictrues from website to substitute that.and i add this code to sovle the application error`

<preference name="loadUrlTimeoutValue" value="70000" />

but it took nearly 10 minutes to lauch the app... the problem failed me... `