设备上找不到图像

Question

我正在构建一个ionic/cordova应用程序。在浏览器中开发时没有问题，但是当我在设备或模拟器上构建和运行时，它们找不到我的图片。我已经验证了这些图片被复制到平台项目中，但是我需要做一些特殊的事情才能使用它们吗？对于android，它们被复制到 assets/www/images 中，我正在尝试使用类似以下方式在我的css中引用它们:

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

但是在控制台上，我在iOS和Android上都收到了404 Not Found的错误。我做错了什么吗？

- jensengar

---

我通常的做法是将图片保存在应用程序的www/img文件夹中，并从那里引用它们 :) - Claudiu S

这就是我正在做的事情，只不过我的文件夹名叫 images 而不是 img。 - jensengar

你尝试使用“img”标签了吗？这可能会破坏Cordova的结构。 - Claudiu S

我会尝试的。我使用ionic设置了项目，并自动创建了“images”。 - jensengar

尝试过了，会导致浏览器崩溃，并且在设备上仍然无法正常工作。 - jensengar

@ClaudiuS 我尝试重新创建项目，更新的项目模板现在使用 img。 仍然没有解决我的问题。 - jensengar

Answer 1

试试这个：

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

- Claudiu S

---

同样适用于iOS/“其他设备”。谢谢！ - Trip

Answer 2

实际上我不确定为什么会这样，但是应用程序的根目录并不像你期望的那样是www。通过使用chrome的远程调试工具进行检查后，我发现应用程序的根目录是android_www。它无法找到我的图片的原因是因为应用程序认为该位置是android_www/www/img/my_image.png。通过使用相对路径，我成功加载了图片。CSS代码如下（我的CSS文件夹与img文件夹是同级的）：

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

- jensengar

Answer 3

尝试使用images/my_image.png而不是/images/my_image.png，这样对我来说可以正常工作。

- Antony Joslin

---

最优雅和简单的解决方案 - Bogdan Ionitza

Answer 4

无论是在本地运行的ionic serve还是从www内容复制到我的Web主机中，对我起作用的是使用相对符号 ../assets/img/。

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

}

我刚刚执行了ionic run 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>

这段代码在两个区域中运行，本地ionic serve和任何安装在我的Web主机上的地方。我无法解释为什么它能工作。

但是它在Android上不起作用。

也许有人可以向我展示如何将嵌套在ion-button内部的图像从.css中转换，以便我可以利用“../assets/img/”路径规范，该规范已经在3种情况下工作：

1. 本地
2. 托管在我的Web文件夹上
3. Android

如果对您有用，请不要忘记接受答案。

更新：我也有一个适用于Android的解决方法。

1. 使用“assets/img/PC_Loop.png”
2. 注意您的文件名扩展名大小写，例如PC_Loop.png而不是PC_LOOP.png。我碰巧在Windows上托管，它不会关心，但是Android是一台愚蠢的Unix机器。因此，在Unix托管上，您还会遇到大小写问题。

我非常不喜欢任何大小写敏感的东西，包括敏感的程序员: )，但我喜欢大小写感知的环境（语言，操作系统等）。

因此，为什么在.HTML中使用nothing，在.CSS中使用“../”是完全荒谬的。

希望这可以帮助下一个人。

- Meryan