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

问题描述 投票:39回答:4

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

有人告诉我,只需将它们添加到www/img。有任何缺点吗?

angular ionic-framework ionic2 ionic3
4个回答
87
投票

将您的图像放在www/img听起来是一个很好的理想,但它只适用于使用ionic serve本地服务。

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

html文件中使用的图像应该是src/assets/img(推荐)而不是www/assets/img(obselete)。图像标签将如下所示:

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

在离子2中,src/assets文件夹用于图像和字体。

这就是离子团队在guide to modify an existing ionic project所说的:

  1. 将www / img移动到src / assets / img。
  2. 将您在www /中拥有的任何其他资源移至src / assets /。

8
投票

[...]似乎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}}">

0
投票

在我的情况下,我不得不用/assets/img/...替换assets/img/...(删除/)

第一个适用于离子服务但不适用于Android

© www.soinside.com 2019 - 2024. All rights reserved.