Question

我使用离子2创建了一个应用程序，在Chrome中进行测试时效果很好。然而，我上传到客户端，并尝试使用离子视图查看 - 并且所有的CSS和图像都丢失了。我可能有错误的路径，或者资产没有上传，但不确定如何调试它。例如，在我的index.html页面中，我有以下链接

<link href="/css/ionic.app.css" rel="stylesheet">

这适用于铬，但不适用于离子视图。此外，图像路径没有出现，例如

<img src="/images/btn_play_again.png" />

这在chrome中运行良好，但我在离子视图中得到了破损的图像。知道如何解决这个问题吗？

Answer 1

让你的路径相对而不是绝对。您的本地路径与应用的路径不同。

可能只需删除起始斜杠：

<link href="css/ionic.app.css" rel="stylesheet">
<img src="images/btn_play_again.png" />

Answer 2

您的路径似乎无效。请确保项目结构的 www 目录中存在以下文件：

css/ionic.app.css
images/btn_play_again.png

如果它们不存在，请将它们添加到 src / assets 文件夹中，这样可确保在每次编译后将这两个文件复制到 www 文件夹中。

Answer 3

很难说如何在没有看到你的文件结构的情况下发生这种情况，但我会尝试使用Ionics directives来解决图像问题，这也可能是你的href css问题的一部分。

<ion-img src="images/btn_play_again.png" />

对于样式，我不知道为什么你有这个链接开始。 Ionic将您的所有scss / sass构建到 build / main.css

<link href="build/main.css" rel="stylesheet">

我想说只需使用离子cli重新生成项目。不要担心更改index.html文件。或者告诉我你的文件结构。

Answer 4

从2.0.0-rc.0（2016-09-28）发布，图像以不同的方式处理。

1：将所有图片放在src/assets/img

中

2：在页面中，HTML文件图像路径看起来像<img src="assets/img/someImage.png">

3：在特定于组件的scss文件中，路径看起来像url('../assets/img/someImage.png');

在实施上述操作时，请勿向您的项目添加平台。如果您已经添加了平台 - 请运行

ionic platform remove <android or ios >

平台移除后 - 请重新添加平台

ionic platform add <android or ios >

现在运行ionic serve或ionic build <platform> - 编译过程会将图像复制到www文件夹中。

找到了一个帖子

这有助于我解决问题。