在 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="你的图片">

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

这就是 ionic 团队在 修改现有离子项目的指南:

<块引用>

22. 将 www/img 移动到 src/assets/img.

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

What’s the best practice for image assets in Ionic 2? I have a bunch of SVGs I want to use as non-system icons. I found some older tips on using Gulp but it seems Ionic team has decided on Rollup as the build tool of choice, no docs on this so far.

Somebody told me to just add them to www/img. Any downsides?

解决方案

Placing your images in www/img sounds like a good ideal but it will only work when serving locally using ionic serve.

When building your app, the www/img will get deleted unless you make a gulp task to copy the images from the folder you want to the www/build folder as shown in this post.

Images used in html files should be in src/assets/img(recommended) and not www/assets/img(obselete). Image tags would then look like this :

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

In ionic 2, the src/assets folder is meant for images and fonts.

This is what the ionic team says in the guide to modify an existing ionic project :

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

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

这篇关于在 Ionic 2 中使用图像资源的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！