在 Ionic 2 中使用图像资源的正确方法答案

【问题标题】：Correct way to use image assets in Ionic 2在 Ionic 2 中使用图像资源的正确方法
【发布时间】：2017-02-18 12:24:59
【问题描述】：

Ionic 2 中图像资源的最佳做法是什么？我有一堆 SVG 想用作非系统图标。我发现了一些关于使用 Gulp 的旧技巧，但似乎 Ionic 团队已决定选择 Rollup 作为构建工具，目前还没有关于此的文档。

有人告诉我只需将它们添加到www/img。有什么缺点吗？

【问题讨论】：

【解决方案1】：

将您的图片放在www/img 中听起来不错，但只有在使用ionic serve 进行本地服务时才有效。

在构建您的应用程序时，www/img 将被删除，除非您执行 gulp 任务将图像从您想要的文件夹复制到 www/build 文件夹，如 in this post 所示。

html 文件中使用的图像应该在src/assets/img（推荐）而不是www/assets/img（作废）。然后图像标签将如下所示：

<img src="assets/img/yourimage.jpg" alt="your image">

在 ionic 2 中，src/assets 文件夹用于存储图像和字体。

这就是 ionic 团队在 guide to modify an existing ionic project 中所说的：

将 www/img 移动到 src/assets/img。

将您在 www/ 中的任何其他资源移动到 src/assets/。

【讨论】：

我仍然遇到安卓设备的问题。在 iOS 中，静态图像正确显示，但在 android 中图像不显示
我在 android 上遇到了 ionic 2.0.1 的问题。工作 img 路径示例：src="../assets/img/yourimage.jpg" - 适用于安卓和浏览器
在 ionic 3 中没有资产文件夹。我创建了它，建议的路径仍然不起作用。关于 ionic 3 重新分级图像路径的任何想法。
我可以验证在两部手机上本地运行以及在浏览器中本地测试的那个有图像代码，类似于上面提到的，像这样： -- 但是，并不是说 Ionic 文件夹看起来是“imgs”而不是“img”，我还尝试了其他变体，一些在其他建议的解决方案中建议的其他变体以及我的一些变体自己的，并且基于目标设备或浏览器的结果好坏参半。无论哪种方式，请确保将图像放在以下文件夹中：src/assets/imgs

【解决方案2】：

[...] Ionic 团队似乎决定将 Rollup 作为构建工具选择，目前还没有这方面的文档。

您似乎在问如何使用新的 RC.0 管理图像

就像您在conference app 中看到的那样，图像存储在src/assets/img 中，然后您可以将它们添加到您的html 代码中，如下所示：

<img src="assets/img/myImg.png">

这是Modifying your Existing Project 指南中提到的步骤之一（准确地说是第 31 步），所以我想这是 Ionic 团队推荐的。

【讨论】：

【解决方案3】：

@ionic/app-scripts : 3.1.8

下面的 src 路径在 Ionic 3 中对我有用。（在资产前加前缀 ../）

<img src="../assets/imgs/{{item.titleID}}.svg" alt="{{item.title_desc}}">

【讨论】：

【解决方案4】：

在我的情况下，我必须将 /assets/img/... 替换为 assets/img/...（删除了 / ）

第一个适用于 ionic serve 但不适用于 Android

【讨论】：