Android 本地图像未在图像中显示

我知道这个问题已经被问过好几次了，我已经尝试了所有在互联网上能找到的解决方案，但都没有成功，所以我在这里再次尝试，看看我是否遗漏了什么

我正在使用Ionic构建一个混合应用程序。我有一个本地图像，我希望能够显示，即使用户在没有互联网连接的情况下启动应用程序，或者在浏览应用程序时失去连接。因此，我希望有本地图像

这是我获取图像的标签：

。爱奥尼亚创建应用程序后，图像位于www/images

我曾经尝试过ionic模拟android--lc，在Chrome中查看控制台会得到以下结果：

GETfile:///android_asset/www/images/track.png net:：找不到错误文件

。我能找到的唯一有趣的事情是，Ionic在构建文件时向文件名添加了一些字符串，因此实际文件夹中的图像文件名看起来像

track.516c558c.png

。这就是问题所在吗

否则，有人知道问题出在哪里吗

---

请注意，这个问题在Android和iOS中都会出现。

答案是，在模拟ionic之前，我使用grunt构建应用程序。Grunt更改了文件名，但是在构建过程中太晚了（运行

Grunt build--force&&ionic模仿android--lc

），看起来好像是ionic更改了文件名，而不是Grunt

因此，我改为：

.track-image-left {
  background: url('../images/train-track.png') no-repeat;
  background-size: 100%;
  display:inline-block;
  float: left;
  height: 20px;
  width: 40px;
  margin-top: 40%;
}

.track-image-right {
  background: url('../images/train-track.png') no-repeat;
  background-size: 100%;
  display:inline-block;
  float: right;
  height: 20px;
  width: 40px;
  margin-top: 40%;

  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

<div class="track-image-left"></div>
<div class="track-image-right"></div>

。向左跟踪图像{
背景：url（'../images/train track.png'）不重复；
背景大小：100%；
显示：内联块；
浮动：左；
高度：20px；
宽度：40px；
利润率最高：40%；
}
.跟踪图像右侧{
背景：url（'../images/train track.png'）不重复；
背景大小：100%；
显示：内联块；
浮动：对；
高度：20px；
宽度：40px；
利润率最高：40%；
-moz变换：scaleX（-1）；
-o变换：scaleX（-1）；
-webkit转换：scaleX（-1）；
转换：scaleX（-1）；
过滤器：FlipH；
-ms过滤器：“FlipH”；
}

---

这很好。

答案是我在模拟ionic之前使用grunt构建应用程序。grunt更改了文件名，但在构建过程中太晚了（运行

grunt build--force&&ionic Simulate android--lc

，看起来ionic在更改文件名，而不是grunt）

因此，我改为：

.track-image-left {
  background: url('../images/train-track.png') no-repeat;
  background-size: 100%;
  display:inline-block;
  float: left;
  height: 20px;
  width: 40px;
  margin-top: 40%;
}

.track-image-right {
  background: url('../images/train-track.png') no-repeat;
  background-size: 100%;
  display:inline-block;
  float: right;
  height: 20px;
  width: 40px;
  margin-top: 40%;

  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

<div class="track-image-left"></div>
<div class="track-image-right"></div>

。向左跟踪图像{
背景：url（'../images/train track.png'）不重复；
背景大小：100%；
显示：内联块；
浮动：左；
高度：20px；
宽度：40px；
利润率最高：40%；
}
.跟踪图像右侧{
背景：url（'../images/train track.png'）不重复；
背景大小：100%；
显示：内联块；
浮动：对；
高度：20px；
宽度：40px；
利润率最高：40%；
-moz变换：scaleX（-1）；
-o变换：scaleX（-1）；
-webkit转换：scaleX（-1）；
转换：scaleX（-1）；
过滤器：FlipH；
-ms过滤器：“FlipH”；
}

效果很好