<!-- Generated by npm run gen:skill from ui/Image/skill.md - do not edit. -->

# Image

## `<image>`

- `scale`: true | false | contain | cover | fill | scale-down
- `size`, `src`, `errorsrc`, `hoversrc`, `prefix`
- actions: release, select, set
- events: Drop
- methods: setTitle

```xml
<application name="ImageExample1" instances="0" xmlns:xlink="http://www.w3.org/1999/xlink">
  <about loader="false"/>
  <view name="v1" width="220" height="80">
    <panel type="columns" padding="8" gap="12" valign="center">
      <image name="small" size="16" src="icon://tree"/>
      <image name="medium" size="32" src="icon://tree"/>
      <image name="large" size="48" src="icon://tree" alt="A tree"/>
    </panel>
  </view>
</application>
```

## Guidance

- Not a control: for a click use a button with `icon` and `title` - an image cannot take the keyboard focus.
- Bound, the node's text is the source; `prefix="icon://"` when the data holds only names; the `set` action changes it.
- `style` goes on the picture itself (`border-radius:50%`), `class` on its outer element.
- `alt` for an image that carries meaning; leave it out (or `alt=""`) for decoration.
