Question

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

我正在使用Ionic构建混合应用程序。即使用户在没有Internet连接的情况下启动应用程序，或者在通过应用程序时丢失连接，我也希望能够显示本地图像。因此，我希望在本地拥有图像。

这是获取图片的标签：<img class="track-image-left" src="images/track.png" />。在Ionic构建应用程序后，图像位于www / images中。

我尝试过离子模拟android --lc并在Chrome中查看控制台给了我以下内容：GET file:///android_asset/www/images/track.png net::ERR_FILE_NOT_FOUND。我能找到的唯一看起来很有趣的是，Ionic在构建时会在文件名中添加一些字符串，因此实际文件夹中的图像文件名称看起来像track.516c558c.png。这可能是问题吗？

否则，是否有人知道问题可能是什么？

请注意，Android和iOS都会出现问题。

Answer 1

答案是我在使用离子模拟之前使用grunt构建应用程序。 Grunt更改了文件名，但是在构建过程中这么做了（运行grunt build --force && ionic emulate android --lc看起来像离子正在进行文件名更改，而不是咕噜声。

因此，我做了这个：

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

哪种方法很好。

局部图像未显示在离子状态

1 个答案: