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

时间:2016-10-10 06:11:46

标签: angular ionic-framework ionic2 ionic3

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

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

4 个答案:

答案 0 :(得分:85)

将图片放在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.   
  3. 将您在www /中拥有的任何其他资源移至src / assets /.

  4.   

答案 1 :(得分:8)

  

[...]似乎Ionic团队决定将Rollup作为构建工具   选择,到目前为止还没有关于此的文档。

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

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

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

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

答案 2 :(得分:3)

@ ionic / app-scripts:3.1.8

以下src路径适用于Ionic 3。(前缀为../资产之前)

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

答案 3 :(得分:0)

在我的情况下,我必须用/assets/img/...替换assets/img/...(删除了 /

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