Images not appearing when running 'ionic emulate ios' : (Resolved)

ionic-v1
1

Hey Everyone,

I’m working on an app with a bunch of images in it. They are all .png files stored within my project’s /www/ folder. Everything works great when I run in chrome for desktop using the ionic serve command. However, when I run ionic build ios; ionic emulate ios the app is missing all of it’s images – otherwise it works fine. Any ideas? Could this be an ios .png thing?

Thanks so much,

2

Are they in their folder at the ios platform level?

3

@mhartington thanks for the suggestion. So in /platforms/ios/build/emulator/HelloCordova.app/www/img all my images are there.

Also in /platforms/ios/www/img

I notice that when I run ionic serve it appears that the browser is attempting to grab the images before angular has compiled the html. This obviously results in unloaded images briefly. Then everything loads a fraction of second later just fine. I wonder if on iOS something is getting held up and the compilation is just failing.

I’m not super experienced in the iOS emulator, but I’ll look into debugging a little more with it.

4

Also, I noticed that I have some ion-slide-box directives with multiple images. These are filled with images via an ng-repeat and images that are not the first image are loading correctly.

I’ve attached a screenshot of chrome developer tools showing me that the my ‘images’ are not loading prior to angular compiling the html and converting the links to actual images. I sort of wonder if I’m loading the tabs incorrectly in a way that’s causing the browser to try and load images before angular compiles.

Update: I was able to resolve the above issue in chrome by using ng-src as opposed to src with my images, but it had no impact on the ios emulator. :frowning:

Update: Running on an Android device doesn’t have the picture either. i.e., this is not limited to ios.

5

FIXED!: Once I noticed that this was both platforms in Cordova I searched for this issue in Cordova in general. I found this link, and was able to quickly resolve it after that.

The short of it was that my images were being loaded with a preceding slash, such as “/img/myImage.png” as opposed to “/img/myImage.png” or “./img/myImage.png”.

Phew! This was a super simple fix.

5 Likes
6

Hey sorry I about taking a while to get back to you. Glad to hear you got this resolved :smile:

7

@mhartington, Apology accepted in full! Thanks for the help and the hard work on the library.

8

Wow. Thank you aftermathew.

I had exactly the same problem for my slidebox. Now it fixed it.

The interesting thing is I used relative image link in my CSS file like this:
…/img/background.png And this works

But in slidebox I when used the same as above it didn’t work. I had to change it to:
./img/background.png

Now if I go back to CSS and change it to one single dot, it wouldn’t work. Strange
In summary, in case other people need to know this:
in CSS, you need 2 dots
in HTML, you need 1 dot.

2 Likes
9

Awesome! This also solved the issue for CSS not loading in the emulator for me. Thanks!

10

Thank you!! I was looking for this for the past few mins…

background: url("…/img/background.png"):smile:

11

I got a similar problem. But when I run ionic cordova build ios and then try to run with Xcode on device or emulator, some local images doesn’t load. I have checked if the images are the platforms/ios folder and nothing changed. When serving to the browser, all images load properly. Anyone can help me here?