Images not displaying

[ChicoH]

Just started on my watch face for my Versa.  I can't get images to display.

For instance:

from the index.gui file

<image id="hrimg" href="hr.png" height="16" width="16" x="240" y="30" />
<text id="myHR" x="270" y="30" />

from the styles.css file

#myHR
{font-size:35;
font-family: System-Bold;
text-length:50;
text-anchor:end;
fill:white;}

hr.png has been copied to the resources folder

myHR displays the text set in index.js

I have no idea why the image isn't displaying.  Anyone have some ideas?

[peperez]

Hey @ChicoH - I've run into a similar issue when using .png images for button icons. 

A couple of ideas:

1) Your height and width seem quite small (only 16x16 pixels). Try using %'s for the height and width (i.e. 16% and 16% if you want a square image that spans 16% of the watch width and 16% of the watch height).

2) Check to see if there are any requirements for the original size of the image you are trying to display. When I ran into this issue I was using a 512x512 image when I had to use a 60x60 pixel.

Let me know if this helps!

[JonFitbit]

Is the image inside your /resources folder?

[ChicoH · Accepted solution]

The image is inside the resources folder.

On a lark, I changed them from PNG files to JPG files, and they all started displaying.  The simulator still acts a little strange and after few seconds, the images disappear and the digital time gets smushed together, but for now, I think things are working as expected.

[MolliorMerx]

Just curious... was this on a regular Versa, or Versa Lite?

The exact same code works fine on a Versa, but the images then fail on a Versa Lite. Literally pulling in the exact same files. (PNG).

DERP -- never mind. 2018.. I thought this was from 2019