swiftuiwidgetkit

WidgetKit WatchOS accessory Inline Image not displaying

I have an accessoryInline widget (for iPhone LockScreen and Watch complication) and I'd like to display a colored Image inside (for iOS & watchOS).
The image is a small png (like 80x80) with transparency. I know there is some limitation with Image inside widgets but the image is quite small.
The image is working with accessoryCircular.
The image displayed as a white rounded circle (It's seems to be the shape of the image but fully filled in white). In the console log, I get the following errors:

CreateWithURL:342: *** ERROR: err=2 (No such file or directory) - could not open '<CFURL 0x10d41bdd0 [0x1d68eee30]>{string = file:///Users/xxx/Library/Developer/CoreSimulator/Devices/xx/data/Library/Caches/com.apple.chrono/snapshot-cache/xx/xx/accessoryInline---1654250760779651625--0.00w-0.00h-0.00r-wzhHcFr6+p3NmSKXbbQN9MPW+BRELiEa9sac7+yu0n8=----0.dark.private-exception.snapshot, encoding = 134217984, base = (null)}'

createImageAtIndex:1955: *** ERROR: could not find plugin for image source - imageRead is NULL

I know the image exists as it's rendered correctly with the accessoryCircular.
I tried a bunch of things like using UIImage or CGImage, I also tried to resize the image using CGContext.makeImage but nothing is working.
Note that I haven't been able to test on a real device as I don't have a real device available.

Here is the image:
enter image description here

Solution

  • That's expected, as the system will override the rendering mode of the image based on different widget types:

    The system can modify the appearance of accessory family widgets. For example, it renders widgets on the Lock Screen on iPhone using the vibrant mode, while it renders widget-based complications in watchOS using either the fullColor or accented modes, depending on the watch face and the user’s settings. You can read the rendering mode from the environment values using the .widgetRenderingMode key. @Environment(.widgetRenderingMode) var widgetRenderingMode You can then customize your widget’s design based on the rendering mode.

    So, you don't need a real device, the simulator's behaviour is expected.

    The document describes the accented mode as:

    When applying the colors, the system treats the widget’s views as if they were template images. It replaces the view’s color — rendering the new colors while preserving the view’s alpha channel.

    Consequently, your circle-shaped Bitcoin icon is displayed as a white rounded circle because its alpha channel shape is a solid circle.