Ionic 2 Images not displaying on device

I had the same issue with relative paths

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

does work with ionic serve / and also with livereload in the emulator (e.g. from src/pages/home/home.html ) But not on the device.

Don't use relative paths for images !!!

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

works for me with Ionic (v3) and also angular typescript apps.On the device (ionic cordova run) with ionic serve and also with ng s (angular apps)

used dir tree:

you can see an (official) example in the ionic conference starter, try:

ionic start ionicConf conference

(btw: same quetiosn & answer here: https://forum.ionicframework.com/t/images-not-displayed-on-device/89145 )

You don't need to use ../assets/. Just specify path from assets/img/.

For images in your CSS (background-image, border-image, etc.), you need to use ../assets/.

Once you build the app, the file structure will be like,

 assets/    img/       img1.jpg       img2.jpg build/    main.css    polyfills.js    main.js index.html

HTML will be dynamically added to index.html. So src of img tag, will be from same location of the index.html file. So, assets/img/*.jpg is enough for src of img tag. Coming to CSS file, the assets folder is a folder back to the its location. So, for using image in CSS like, background-image, border-image etc. we need to specify the path like, ../assets/img/*.jpg.

Add your images to src/assets/imgs directory

Set image path in HTML like

<img src="assets/imgs/example.jpg">

Set image path in SCSS like

background-image: url(../assets/imgs/example.jpg);

It will work browser, emulator and build