angular - Ionic 2 Images not displaying on device

Question

It just seems the simplest of things such as using the correct url path for an image can consume so much time and effort with no success at all.

So, in my homepage I tried to use one of the following:

<img src="../assets/img/image.jpg"/>
<img src="/assets/img/image.jpg"/>
<img src="assets/img/image.jpg"/>
<img src="./assets/img/image.jpg"/>
<img src="../../assets/img/image.jpg"/>

All of which display on the browser and but not on the device.

I've read so many threads and it is disgraceful that yet there is no real solution to this. I would really like to know what it is I am doing wrong here? Any helps and real solutions would be very much appreciated.

question from:https://stackoverflow.com/questions/42830752/ionic-2-images-not-displaying-on-device

Answer 1

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 )