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

# Image

> Display an image from a URL or from a data query, or paste an image directly into the editor to upload and insert an image tag automatically.

```liquid theme={null}
{% image
    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
    description="Sample placeholder image"
/%}
```

## Examples

### Basic Usage

```liquid theme={null}
{% image
    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
    description="Sample placeholder image"
/%}
```

### With Dark Mode

```liquid theme={null}
{% image
    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
    dark_url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-white.png"
    description="Logo that changes in dark mode"
/%}
```

### From a Data Query

```liquid theme={null}
{% image
    data="products"
    column="image_url"
    description_column="product_name"
/%}
```

### From a Data Query with Filters

```liquid theme={null}
{% dropdown id="category_filter" data="products" value_column="category" /%}

{% image
    data="products"
    column="image_url"
    description="Best selling product"
    filters=["category_filter"]
    order="sales desc"
/%}
```

## Attributes

<ResponseField name="url" type="string">
  The URL of the image. Required unless data is provided.
</ResponseField>

<ResponseField name="dark_url" type="string">
  The URL of the image to show in dark mode
</ResponseField>

<ResponseField name="description" type="string">
  Description of the image, used as alt text. Required unless description\_column is provided.
</ResponseField>

<ResponseField name="data" type="string">
  Table or query to load the image URL from; the image updates when applied filters change
</ResponseField>

<ResponseField name="column" type="string">
  Column containing the image URL; the first row of the query result is displayed
</ResponseField>

<ResponseField name="dark_column" type="string">
  Column containing the image URL to show in dark mode
</ResponseField>

<ResponseField name="description_column" type="string">
  Column containing the image description, used as alt text
</ResponseField>

<ResponseField name="filters" type="array">
  IDs of filters to apply to the query
</ResponseField>

<ResponseField name="max_width" type="number">
  Maximum width of the image in pixels
</ResponseField>

<ResponseField name="border" type="boolean" default="false">
  Whether to show a border around the image
</ResponseField>

<ResponseField name="dither" type="boolean" default="false">
  Whether to apply dither effect to the image
</ResponseField>

<ResponseField name="align" type="string" default="center">
  Alignment of the image

  **Allowed values:**

  * `left`
  * `right`
  * `center`
</ResponseField>

<ResponseField name="class" type="string">
  Additional CSS classes to apply to the image
</ResponseField>

<ResponseField name="refresh_interval" type="number">
  Time in seconds between automatic data refreshes (minimum 60). Overrides the page-level auto-refresh setting for this component.
</ResponseField>

<ResponseField name="where" type="string">
  Custom SQL WHERE condition to apply to the query. For date filters, use date\_range instead.
</ResponseField>

<ResponseField name="limit" type="number">
  Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows.
</ResponseField>

<ResponseField name="order" type="string">
  Column name(s) with optional direction (e.g. "column\_name", "column\_name desc")
</ResponseField>

<ResponseField name="qualify" type="string">
  Custom SQL QUALIFY condition to filter windowed results
</ResponseField>

<ResponseField name="width" type="number">
  Set the width of this component (in percent) relative to the page width
</ResponseField>