> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> Display an image, static or driven by data.

<Info>
  **Category:** Display · **Reads data:** yes (URL) · **Sends commands:** no
</Info>

## 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

```cpp theme={null}
device.updateWidget(targetId, "doorImg",
  isOpen ? String("https://.../open.png") : String("https://.../closed.png"));
```

## Script API example

The same interactions from a [dashboard script](/script/overview):

```js theme={null}
// 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');
  }
});
```

<Card title="SVG" icon="bezier-curve" href="/dashboard/widgets/svg">
  For crisp, scalable vector graphics.
</Card>