Skip to main content
Category: Display · Reads data: yes (URL) · Sends commands: no

​
Mental model

An Image is a picture frame. It shows a picture — product art, a diagram, a status graphic — and the picture can change if you push a new URL to it.

​
When to use it

  • Product imagery, branding, diagrams
  • A state graphic that swaps based on data

​
Settings

​
General / Data

  • Widget Title / ID · Image URL · Alt text

​
Style

  • Image fit · width / height · alignment
  • Image filter · opacity · padding · border

​
Example — swap the image by data

device.updateWidget(targetId, "doorImg",
  isOpen ? String("https://.../open.png") : String("https://.../closed.png"));

​
Script API example

The same interactions from a dashboard script: 
// Swap the image from incoming device data
ws.onMessage((msg) => {
  if (msg.door !== undefined) {
    widget.setValue('doorImg', msg.door
      ? 'https://example.com/open.png'
      : 'https://example.com/closed.png');
  }
});

SVG

For crisp, scalable vector graphics.