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

# Image

## Image

Displays an image. Supports online URLs, blob URLs, and data URLs.

## Signature

```xml theme={null}
<Image Src="{Data.Cover.Url}" Alt="封面" W="160" H="90" Rounded="True" />
<Image>https://example.com/a.png</Image>
```

## Attributes

| Attribute | Type | Description |
| :- | :- | :- |
| `Src` | URL | Required; https / Blob / data URL |
| `Alt` | string | Alternative text |
| `W` / `H` | 1–2048 | Width and height in pixels |
| `Rounded` | `True` / `False` | Rounded corners |

## Runtime behavior

* Static https images may come from any HTTPS host.
* Dynamic `Src` must match `Widget.ImageHosts`; use `*` or `*.cdn.com` for one-time approval.
* Blob URLs (from `Data Type="Binary"` or `Resources Binary`) render directly.
* Without `W` the width is 100%; without `H` the height is automatic.
* Cropping uses `object-cover`.

## Example

```xml theme={null}
<Image Src="{Data.Avatar}" W="48" H="48" Rounded="True" Alt="头像" />

<Data Name="Cover" Type="Binary" Source="File" Path="./cover.png" />
<Image Src="{Data.Cover.Url}" W="320" H="180" Rounded="True" />
```

## Gotchas

* A failed remote image shows no placeholder; use `If` on the data state when you need one.
* Dynamic images that do not match `ImageHosts` do not render; the remote host still sees the request IP, so use a trusted host or Blob for sensitive content.
* Large images consume memory; keep `W`/`H` small.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.