Question

我正在构建一个离子/ cordova应用程序。在浏览器中进行开发时我没有任何问题，但是当我在设备或模拟器上构建和运行时，他们无法找到我的图像。我已经确认图像被复制到平台项目中，但我是否必须做一些特殊的事情才能使用它们？对于Android，他们被复制到assets/www/images，我试图在我的CSS中使用类似的东西来引用它们：

.myImage{
    height: 20px;
    width: 20px;
    background: url('/images/my_image.png') no-repeat;
}

但在控制台中我在ios和android上都出现404 Not Found错误。我做错了什么？

Answer 1

试试这个：

background: url('./img/my_image.png') no-repeat;

Answer 2

所以我实际上不确定为什么会这样做，但应用根不像您期望的那样www。在使用chrome的远程调试检查事物后，我发现应用程序的根目录是android_www。它无法找到我的图片的原因是因为根据应用程序，位置为android_www/www/img/my_image.png。通过使用相对路径，我能够加载图像。 css看起来像这样（我的css文件夹是我的img文件夹的兄弟）：

background: url('../img/my_image.png') no-repeat;

Answer 3

而不是/images/my_image.png 尝试images / my_image.png out out / it for my

Answer 4

当我运行本地离子服务或从复制到我的网站主机的www的内容时，对我来说有用的是使用相对表示法 ../assets/img/ 像这样

.AMSView-background {
  background: url(../assets/img/UMSViewBGTile.png)  center center fixed;
  background-size: 50px;
  background-repeat: repeat;

}

我刚做了一个离子运行android --prod 以及相关规范修复了问题以及Android。

我从未为iOS构建过，因此我无法在那里发表评论。

注意：上面的../assets/img/正在使用我的.scss文件，我认为这些文件已经编译成build / main.css，因此它解释了为什么我们必须要创建一个父文件。

但是，我从html中引用的观点也会使用

转换成main.js

../assets/img

但强迫当前文件夹

./assets/img

，如

    <button ion-button (click)="AMSController.Loop()"> <img src="./assets/img/PC_LOOP.png" width="30px" height="30px"/> </button>
</div>

适用于2个区域，本地离子服务以及我的网络主机上安装的任何位置。我无法解释它为何有效。

然而，它在Android上无效。

也许有人可以告诉我如何将嵌套在离子按钮内的图像转换为.css，以便我可以利用已经在3中工作的'../assets/img/“路径规范例

本地
托管在我的网络文件夹
的Android

如果适合您，请不要忘记接受答案。谢谢。

更新：我也修复了Android 。

在“assets / img / PC_Loop.png”中使用任何内容
注意您的文件扩展名案例PC_Loop.png，而不是PC_LOOP.png。我碰巧在Windows上主持不关心，但Android是一个愚蠢的Unix机器。所以在Unix托管上你也会观察到套管问题。

我非常不喜欢任何区分大小写的内容，包括敏感程序员:)，但我喜欢感知案例的环境（语言，操作系统......）

那么为什么不使用.HTML和.CSS中的“../”是完全荒谬的。

希望这有助于下一个人。

设备上找不到图像

4 个答案: