How to insert image in ionic 2

Question

I\'m new on ionic 2 and i\'m trying to insert an image, but i don\'t realize the real path. inside the file app/pages/getting-started/getting-started.html

&         


        

Answer 1

Since Ionic2 apps ES2015 js complies down to normal javascripts(ES5), you should have your images etc in the www/build folder

So create a folder www/build/img and add your images in there. Then you should be able to access it as build/img/img1.png

EDIT

Adding an answer to the question i don't undestand why you need to work the code in app folder but put insert the images into www folder

---

Ionic2 uses latest javascript standards such as ES2015 (ES6) , Typescript (Optional) . This allows us to write code in slightly different way than we do in normal javascript. With classes modules etc.

However still most of the browsers doesn't support this new javascript standards , hence Ionic uses a concept called transpiler to change the new javascript code to old fashion javascript code so that browsers can understand.

So with Ionic2 even though u code in the app folder ultimately it compiles and runs from the www folder. Technically speaking your ionic app still runs from the www folder, because of that reason you have to add your images to the www folder.

Answer 2

Tested with Ionic2.rc2:

The default build takes the images under src/assets/img and puts it under assets/img. In order to reference them from the scss files you need to go up a folder:

background: url('../assets/img/sports-backgrounds.jpg');

That's the only way I got it to work, even even leaving out the '../' worked on the browser while testing.

At the same time, if you're referencing the images from the view (html files), here's what works for me:

<img src="assets/img/logo-image-for-login-page.jpg"

Ionic 2 is somewhat unstable so there're still some quirks that need to be ironed out.

Good luck.

Answer 3

The following worked for me.

Inserted <img src="../../assets/imgs/logo.png" alt="couldn't load"> to home.html file located inside app/src/pages/home directory.

Location of the image is app/src/assets/imgs/logo.png

Hope this helps.