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?
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">
.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)
I see, you call it from your css.
Then it should be url(’…/img/key.png’), if you have the normal folders structure.
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…
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).
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?
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!
did you try running on the emulator?
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 
It’s strange that something so simple is giving me such a hard time.
