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

> ## Agent Instructions
> Read /start/capabilities before choosing an integration. Use the deployed server’s tools/list for current tool inputs.

# Images

> Show a different image for each visitor.

Use a component target around an image.

## 1. Add a wrapper

```html theme={null}
<div data-personalize="hero-visual">
  <img src="/images/overview.jpg" alt="The complete product"
       width="1200" height="800">
</div>
```

Target `[data-personalize='hero-visual']` with `mode: 'component'` and `placement: 'replace'`.

## 2. Add an image variant

```html theme={null}
<img src="https://www.example.com/images/operations-view.jpg"
     alt="The operations workspace showing a weekly schedule"
     width="1200" height="800"
     style="width:100%;height:auto;object-fit:cover">
```

Use your own image URL. Keep dimensions consistent across variants to avoid layout shifts, and write alt text for each image.

If an image and its message must agree, include both in one [component](https://docs.usedynamite.com/experiences/components.md).

> [accordion] Supported image markup
>
> Imported HTML supports `src`, `alt`, `width`, `height`, `loading`, classes, and allowed inline styles. It does not preserve `picture`, `source`, `srcset`, or `sizes`. Keep a responsive image pipeline in your application if you need those features.
>
> Relative URLs resolve against the website origin. A broken image URL does not automatically select another variant. Preview the saved result before publishing.


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