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.

Answer 1

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.

Answer 2

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