Ionic does not load images

Question

In my application, I have some local images. I can see my images when testing in the Google developer tools using ionic serve and even in the genymotion simulator with Android 4.4.4 and 4.2.2. but when I install my application on a real Android device (I try to use the Samsung Galaxy S3 and Samsung Galaxy Ground Neo), I do not see my images.

My folder structure is as follows:

• WWW
  • index.html
  • attachment
    • book
      • book.html
      • Images
        • icon.png

and in my book.html I will try the following URL to download the image:

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

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

  <img src="icon.png"> 

but that will not work.

Answer 1

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

 - index.html - folder -image.png 

You need to say src="image.png" . Therefore, in your case, you do not need to refer to the root directory (folder). You can just say images/icon.png . To refer to a top-level folder (if it was in the root directory), you can say ../../icon.png using ../ for each subsequent folder.

Answer 2

I had the same problem. my images are stored in www\assets\images . I used the path ../../assets/images/myimg.png and worked in a ruffle, but not when deploying to my Android device.

the solution that worked for me is to remove the relative path and use assets/images/myimg.png