ng-show directive returning correct but empty <img> only on device

Question

I've seen a few answers to questions like this, but nothing seems to be working.

I have a images in an ion-list that are supposed to be accessed by my Ionic application using the ng-show Angular directive. Running locally on my machine, these load up perfectly. When deployed to my iPhone 5s however, all that is shown is a bunch of empty images. In my tests, I have also included a second set that should do the same, placed outside of <i> tags and using ng-src instead of src and ng-if instead of ng-show .

Nothing works. Here is the current HTML:

<img class="padding-basic-right" ng-src="img/love.png" width="48px" ng-if="track.loved">
<img class="padding-basic-right" ng-src="img/skip.png" width="48px" ng-if="!track.loved">

<i class="icon icon-accessory">
  <img class="padding-basic-right" src="img/love.png" width="48px" ng-show="track.loved">
  <img class="padding-basic-right" src="img/skip.png" width="48px" ng-show="!track.loved">
</i>

I've been struggling with this for the better part of a day and I've been fixing much bigger problems than this in that time. What's going wrong?

Answer 1

I found a solution: not using PNGs. Apparently ng-show will not render PNG files, but is happy to do so with JPGs and SVGs.

Confused, but it's fixed now.