使用离子框架，本地图像在 chrome 中完美显示，但在我的 android 手机中却没有答案

【问题标题】：using ionic framework,local image display perfectly in chrome but not in my android phone使用离子框架，本地图像在 chrome 中完美显示，但在我的 android 手机中却没有
【发布时间】：2017-05-12 11:02:49
【问题描述】：

我是 ionic 框架的新手。我想在我的应用程序中使用幻灯片框并更改 css 中的背景图片。我使用本地图像和来自外部链接的图像。所有图像都可以在 chrome 中完美显示，但是当我在我的三星note 2手机中打开APK，没有图片，甚至本地图片也没有显示。我试图安装白名单插件。但是当我安装 APK 时它弹出应用程序错误。我在 config.xml 中添加了这个

 <access origin="*"/>

这是我的 index.html 代码

 <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'">

这是我的 tab-photo.html 代码

<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>

这是我的 style.css 代码

.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;

}

说实话，我不太清楚白名单插件的使用，本地图片也需要获得许可吗？谢谢大家，帮助我在 DDL12.31.TOT 之前解决问题

【问题讨论】：

标签： android css ionic-framework whitelist

【解决方案1】：

我仍然无法找出为什么所有本地图像都无法在我的手机上显示。但是我使用了网站上的所有图片来代替它。我添加了这个代码来解决应用程序错误`

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

但启动应用程序花了将近 10 分钟... 问题让我失望了…… `

【讨论】：

【解决方案2】：

通过在运行时调试您的应用，尝试在运行时调试您的应用。使用 chrome 在 Android 和 iOS 版 Safari 上检查您的应用。

你可以参考。到下面的链接了解更多关于如何使用 chrome 调试你的 web 应用程序。

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

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

在下方评论以获得更多帮助。

干杯！！

【讨论】：