Images not rendering on iOS but fine in browser


#1

I am building an ionic 2 application, with some buttons at the bottom, the third button doesn’t use ionicons, it uses a custom image, stored in /www/img. This is what the buttons look like in my browser:

However, when deployed to ios, they look like this:

Why has this happened?


#2

Can we see the path you use to point to your img folder?

Make sure the path is starting from your index.html file, so it should be<img ng-src="img/yourimage.png">


#3
  .ion-ios-key::before, .ion-md-key::before {
      max-height: 32px;
      content: url('../../img/key.png');
    }

if I change this too:

  .ion-ios-key::before, .ion-md-key::before {
      max-height: 32px;
      content: url('/img/key.png');
    }

then I get the exact same results (work in browser, fail on device)


#4

I see, you call it from your css.

Then it should be url(’…/img/key.png’), if you have the normal folders structure.


#5

I have updated my code, but the …img path doesn’t work on the browser either

Note, I am using IONIC 2 which has a different structure…


#6

AFAIK, when your image is located in www/img then you should reference it as img/key.png from your HTML files or as ../../img/key.png from your SCSS files.

I just tried this and it works in Chrome and when deployed to an Android device (I can’t test it on iOS though):

.ion-ios-key::before, .ion-md-key::before {
    max-height: 32px;
    content: url(../../img/key.png);
}

You could try to insert the image in one of the pages (i.e. <img src="img/key.png">) to check if it’s present after deploying to iOS (this way you’ll know if it’s a problem with the file or something with the styles).


Images in ionic 2
I can't see my images in my smartphone Android
Ionic 2 directory structure
Ionic 2 directory structure
App destroy img folder
#7

OK, fixed it! The problem was that whilst the browser works, if you go straight to XCode build, then you face issues, using ionic emulate ios as a pre-build step seems to make the difference!

One problem I am not able to overcome currently though…

I need to scale the image to be the same (/similar) size tot he other icons, so I ahve the following css:

  .buttons .key img {
     max-width: 34px;
     max-height: 34px;
     height: auto;
     width: auto;
     vertical-align: center;
     transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg);
   }

in browser:

on emulator:

Why is the key image stretching and how can I work around this?


#8

Hey, I’m having similar issues on Android (images not showing on the phone but appearing ok in the browser…).

Should I be using <img **ng-**src=“images/file.png” /> or simply ??

Images are in www/images/ folder.

Thnx in advance!


#9

did you try running on the emulator?


#10

The emulator seems very slow. It launches but then the app did not load inside it. I don’t know it I should have given it more time but I think something went wrong :confused:

It’s strange that something so simple is giving me such a hard time.