Correct way to use image assets in Ionic 2 Correct way to use image assets in Ionic 2 angular angular

Correct way to use image assets in Ionic 2


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 :

  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.

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.


@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}}">