ionic doesn't load images

Question

In my application I have some local images. I can see my images when test in google developer tools with ionic serve and even in genymotion simulator with android 4.4.4 and 4.2.2. but when I install my app on real android device ( I try on Samsung Galaxy S3 and Samsung Galaxy Ground Neo) I can't see my images.

My folder structure is like this:

www
- index.html
- app
  - book
    - book.html
    - images
      - icon.png

and in my book.html I try the following url for loading image:

    <img src="app/book/images/icon.png">
    <img src="../../images.icon.png">

I also move icon.png to root folder inside index.html and try this:

  <img src="icon.png">

but it doesn't work.

I remember the same question: http://stackoverflow.com/questions/27267378/how-do-i-access-and-display-images-from-an-ionic-app/27267507#27267507 — Rasalom, Dec 15 '14 at 14:14
if you're rendering book.html then it should look for path `images/icon.png`. — Incpetor, Dec 28 '14 at 05:30

score 2 · Accepted Answer · answered Apr 26 '15 at 17:53

The way that HTML structure works is that is that you always need to call your files relative to your current file. For example, if your structure looks like:

- index.html
- folder
    -image.png

You would need to say src="image.png". So in your case, you do not have to reference the root directory (folder). You can just say images/icon.png. To reference an upper level folder (if it were in the root), you could say ../../icon.png, using ../ for each subsequent folder.

score 1 · Answer 2 · answered Mar 20 '17 at 13:48

I had the same problem. my images are stored in www\assets\images. I was using the path ../../assets/images/myimg.png and worked in ripple but not when deployed to my android device.

The solution that worked for me was removing the relative path and using assets/images/myimg.png

ionic doesn't load images

2 Answers2