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

Correct way to use image assets in Ionic 2

Ionic 2 中图像资产的最佳做法是什么?我有一堆我想用作非系统图标的 SVG。我找到了一些关于使用 Gulp 的旧技巧,但 Ionic 团队似乎已决定将 Rollup 作为首选的构建工具,目前还没有这方面的文档。

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

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

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

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 中所说的:

  1. Move www/img to src/assets/img.

  2. Move any other resources you have in www/ to src/assets/.

[...] it seems Ionic team has decided on Rollup as the build tool of choice, no docs on this so far.

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

就像您在 conference app 中看到的那样,图像存储在 src/assets/img 中,然后您可以像这样将它们添加到您的 html 代码中:

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

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

@ionic/app-scripts : 3.1.8

下面的 src 路径在 Ionic 3 中对我有用。(prefixed ../ before assets)

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

在我的例子中,我不得不用 assets/img/... 替换 /assets/img/... (删除了 /

第一个作品在 ionic serve 但不是 Android