Ionic 2 - 离子视图应用程序中没有出现样式或图像答案

【问题标题】：Ionic 2 - No styles or images appearing in ionic view appIonic 2 - 离子视图应用程序中没有出现样式或图像
【发布时间】：2017-05-08 06:03:26
【问题描述】：

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

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

这在 chrome 中可以正常工作，但在 ionic 视图中不行。此外，图像路径也没有出现，例如

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

这行得通——我不得不将图像移动到 src/assets 文件夹中，并在那里引用 therm 作为相对路径——如stackoverflow.com/questions/39952214/… 所示。我仍然有问题的一件事是将图像引用为 css 背景图像 - url('assets/img/name.png') 不起作用
路径应该是相对于www/build文件夹下生成的文件main.css。因此正确的路径应该是 url('../assets/img/name.png')

【解决方案2】：

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

可能只是删除起始斜线的问题：

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

【讨论】：

【解决方案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">

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

【讨论】：

【解决方案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 文件夹中。

这有助于我解决问题。

【讨论】：