Correct way to use image assets in Ionic 2

Question

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?

score 97 · Accepted Answer · edited Jul 04 '17 at 08:29

97

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 :

Move www/img to src/assets/img.

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

edited Jul 04 '17 at 08:29

Flavien Volken

19,196
12
100
133

answered Oct 10 '16 at 07:59

AlexB

3,518
4
29
46

1

I am still having issues with android devices. in iOS the static images appear correctly but in android image does not appear – Rahul Vyas Feb 14 '17 at 03:41
I meet a problem with ionic 2.0.1 on android. The example of working img path: src="../assets/img/yourimage.jpg" - works on android and browser – Enginer Mar 08 '17 at 20:20
1

in ionic 3 there is no assets folder. i created it the suggested path is still not working. any thought on ionic 3 regrading images paths. – Nauman Ahmad Oct 17 '17 at 16:26
I can verify that the one that worked natively on both phones as well as testing locally in a browser is having the image code, similar as to what is mentioned above, like this: -- however, not that the Ionic folder appears to be "imgs" and not "img" I also tried other variations, some suggested elsewhere in other proposed solutions as well as a few variations of my own, and had mixed results based on the target device or browser. Either way, make sure that you put your images in the following folder: src/assets/imgs – Various Artist May 15 '18 at 18:35

score 11 · Answer 2 · answered Oct 10 '16 at 13:18

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

Seems like you're asking how to manage images with the new RC.0

Just like you can see in the conference app the images are stored in src/assets/img and then you can add them to your html code like this:

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

This is one of the steps mentioned in the Modifying your Existing Project guide (step 31 to be precise), so I guess this is what Ionic team recommends.

score 3 · Answer 3 · edited Mar 21 '18 at 03:22

3

@ionic/app-scripts : 3.1.8

The below src path worked for me in Ionic 3.(prefixed ../ before assets)

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

edited Mar 21 '18 at 03:22

Pang

9,564
146
81
122

answered Mar 21 '18 at 03:17

javapedia.net

2,531
4
25
50

score 0 · Answer 4 · answered Mar 25 '19 at 17:24

0

in my case, I had to replace /assets/img/... with assets/img/... (removed the / )

the first works in ionic serve but not on Android

answered Mar 25 '19 at 17:24

Luca C.

11,714
1
86
77

Correct way to use image assets in Ionic 2

4 Answers4

Linked