Fitbit simulator showing grayscale png as transparent

[Candunc]

I'm building a Solitaire app for my Fitbit Ionic, and I've uploaded 52 png images to represent each of the cards. Below is the actual png file:

However, when I compile the app and run it in Fitbit OS Simulator (Ionic watch), it shows up as transparent, with 'black' being mapped to transparent and 'white' being mapped to black:

Below is how it appears in Fitbit Studio:

Do I need to convert the png files to something else? They've been converted through imagemagick from a larger card, so if I can just add an argument that would be the best solution.

[LiamFitbit · Accepted solution]

Greyscale images have a special behaviour defined that lets you use them as masks. You can set the fill colour via the fill property. In this instance, you probably want to use a colour PNG to avoid this behaviour.