本地图像不显示在Ionic

我知道这个问题已经被问了好几次了，我尝试了所有可以在互联网上找到但没有成功的解决方案，所以我在这里再次尝试，看看我是否错过了一些东西。本地图像不显示在Ionic

我正在使用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中都会发生。

来源

2016-10-12 BluePrint

答案是，我用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>

哪些工作正常

来源

2016-10-12 11:26:38 BluePrint

本地图像不显示在Ionic

回答

相关问题