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.

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 )

Answer 2

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.

Answer 3

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

Answer 4

My problem was uppercase in the name of the file in the folder.. Checking it out now

Answer 5

In Ionic (v3) it should work, its works for me.

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

Additional

If your image URL is dynamic then you can use property binding, sometimes it does not work on the real device when we use img src like-

    <img src="{{imageUrl}}">  

then it works in the browser but in the real device sometimes it does not work, so here is another way we use property binding-

    <img [src]="imageUrl">  

it is work on the real device.

Answer 6

I was facing the same problem but solved by the path from relative to absolute and it is working now . I would like to share my experience as well that I have not changed the angular file which requires the img location lolx it was funny but I did it so also look your HTML page as well.

Answer 7

The real solution I feel is: make all your paths like src="assets/img/image.jpg" and once you do that everywhere in your app src, do build: ionic cordova build ... This will make sure that images appear on the next run.