Correct way to use image assets in Ionic 2

angular ionic-framework ionic2 ionic3
Aen Tan picture Aen Tan · Oct 10, 2016 · Viewed 82.5k times · Source

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?

Answer

AlexB picture AlexB · Oct 10, 2016

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/.

Related questions

How to get the value from ion-select option

I have an array of object called options. this is my html code <ion-item> <ion-label>place</ion-label> <ion-select [(ngModel)]="place" (click)="optionsFn(item);"> <ion-option value="item" *ngFor="let item of options"&…

Read More
ionViewWillEnter vs ionViewDidEnter

When we would not want to reinitiate a task that is already cache, there is no doubt that we will be using ionDidLoad. Now, let's make assumption that we need to do a task each and every time when we …

Read More
Ionic2 ion-toggle get value on ionChange

I have this toggle here: <ion-toggle (ionChange)="notify(value)"></ion-toggle> When I click this I want to call the method notify passing the toggle value by parameter. How I can get the toggle value? Thank you!

Read More