CODEWITHSUNDEEP
androidioscsscordovaionic-framework
jensengar
jensengar

Reputation: 6167

Images not found on devices

I have an ionic/cordova app I am building. When developing in the browser I have no issues but when I build and run on devices or emulators they can't find my images. I have verified that the images are getting copied over to the platform projects, but do I have to do something special to be able to use them? For android, they are getting copied into assets/www/images and I am trying to reference them in my css using something like:

.myImage{
    height: 20px;
    width: 20px;
    background: url('/images/my_image.png') no-repeat;
}

but in the console I get a 404 Not Found error on both ios and android. What am I doing wrong?

Upvotes: 3

Views: 7660

Answers (4)

Meryan
Meryan

Reputation: 1493

What is working for me both when running off the local ionic serve or from the content of www copied to my web host is to use relative notation ../assets/img/ like so

.AMSView-background {
  background: url(../assets/img/UMSViewBGTile.png)  center center fixed;
  background-size: 50px;
  background-repeat: repeat;

}

I just did a ionic run android --prod and the above relative specification fixed the issue as well on Android.

I have never built for iOS so I can't comment there.

Note: the above ../assets/img/ is working from my .scss files which I believe are getting compiled into build/main.css, thus it explains why we have to up one parent.

However, my reference from html which from my observation also gets transpiled into main.js using 

../assets/img

but forcing current folder like so 

./assets/img

as in

    <button ion-button (click)="AMSController.Loop()"> <img src="./assets/img/PC_LOOP.png" width="30px" height="30px"/> </button>
</div>

works in 2 areas, on local ionic serve and anywhere installed on my web host. I can't explain why it works.

However it does not work on Android.

Perhaps someone can show me how to convert the image nested above inside an ion-button but from a .css so that I can take advantage of the '../assets/img/" path specification which is already working in 3 cases

  1. Local
  2. Hosted on my web folder
  3. Android

Don't forget to accept the answer if works for you. Thank you.

UPDATE: I have a fix for Android as well.

  1. Using nothing as in "assets/img/PC_Loop.png"
  2. Pay attention to your filename extension case PC_Loop.png and not PC_LOOP.png. I happen to host on Windows which does not care, but Android is a stupid Unix machine. So on Unix hosting you also observe issue with casing.

I dislike very much anything case-sensitive, including sensitive programmers :), but I like case aware environments (language, OS, ...)

So why use nothing from .HTML and "../" from .CSS is totally absurd.

Hope this helps the next person.

Upvotes: 0

Antony Joslin
Antony Joslin

Reputation: 319

instead of /images/my_image.png try images/my_image.png with out / it works for me

Upvotes: 1

jensengar
jensengar

Reputation: 6167

So I'm actually not sure why it does this, but the app root is not www like you would expect. After inspecting things with chrome's remote debugging, I found the root of the app was android_www. The reason it couldn't find my image is because according to the app, the location was android_www/www/img/my_image.png. By using relative pathing, I was able to load the image. The css looked like this (my css folder was a sibling to my img folder):

background: url('../img/my_image.png') no-repeat;

Upvotes: 3

Claudiu S
Claudiu S

Reputation: 1637

Try this:

background: url('./img/my_image.png') no-repeat;

Upvotes: 12

Related Questions