0
322
ViewsIonic 2 Images not displaying on device
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.
3 answers
Answer question0
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 )
0
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.
0
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