**Image Component — LLM Reference**

`Image` renders a responsive, email-client-compatible image with optional linking. It uses a table wrapper for maximum compatibility across email clients (including Outlook) and supports desktop/mobile overrides, data bindings, and Outlook-specific pixel constraints.

---

## Position in the Document Tree

```
DocumentTree
└── Section
    └── Container
        └── Column
            └── Text
            └── Image          ← can be linked or standalone
            └── Spacer
            └── Button
```

`Image` is a leaf node. It can be placed anywhere a child component is accepted (inside `Column`, `Row`, `Container`, etc.).

---

## ComponentNode JSON Structure

```json
{
  "id": "unique-string-id",
  "type": "ImageComponent",
  "config": {
    "src": "https://example.com/image.jpg",
    "alt": "Alt text description",
    "width": "100%",
    "maxWidth": "600px"
  }
}
```

---

## `ImageConfig` — Full Property Reference

| Property              | Type                          | Required | Default     | Description |
|-----------------------|-------------------------------|----------|-------------|-----------|
| `src`                 | `string`                      | Yes      | —           | Image source URL |
| `alt`                 | `string`                      | Yes      | —           | Alt text (required for accessibility) |
| `width`               | `string`                      | No       | "100%"      | Desktop width (e.g. "100%", "300px") |
| `height`              | `string`                      | No       | "auto"      | Desktop height |
| `maxWidth`            | `string`                      | No       | "100%"      | Maximum width |
| `maxHeight`           | `string`                      | No       | —           | Maximum height |
| `backgroundColor`     | `string`                      | No       | —           | Background color of wrapper cell |
| `padding`             | `string`                      | No       | —           | Padding around image (CSS string) |
| `borderRadius`        | `string`                      | No       | "0"         | Border radius |
| `border`              | `BorderConfig`                | No       | —           | Border configuration |
| `innerLink`           | `IInnerLink`                  | No       | —           | Preferred linking object |
| `href`                | `string`                      | No       | —           | Deprecated. Use `innerLink` instead |
| `objectFit`           | `"contain" \| "cover" \| ...` | No       | —           | CSS `object-fit` |
| `objectPosition`      | `string`                      | No       | —           | CSS `object-position` |
| `outlookWidth`        | `string`                      | No       | —           | Pixel width for Outlook Classic (no "px") |
| `mobile`              | `ImageMobileConfig`           | No       | —           | Mobile-specific overrides |

---

## `innerLink` Structure

```json
"innerLink": {
  "type": "url" | "email" | "phone" | "anchor" | "page_top" | "page_bottom" | "none",
  "url"?: string,
  "email"?: string,
  "phone"?: string,
  "anchor"?: string,
  "target"?: "_blank" | "_self"
}
```

---

## Mobile Overrides (`mobile`)

Only explicitly set properties are overridden on mobile. Unspecified properties inherit desktop values.

```json
"mobile": {
  "width": "100%",
  "maxWidth": "100%",
  "borderRadius": "0px",
  "hidden": false
}
```

---

## How It Works

The component renders inside a `<table>` for email compatibility. It includes:

- Desktop styles + mobile media query (`@media (max-width: 768px)`)
- Outlook Classic support via MSO conditional comments when `outlookWidth` is set
- Automatic link wrapping when `innerLink` is provided
- `display: block` on the `<img>` to remove unwanted gaps
- Unique class names for safe mobile CSS targeting

---

## React Usage

```tsx
import Image, { ImageConfig } from './Image';

const config: ImageConfig = {
  src: "https://example.com/image.jpg",
  alt: "Product showcase",
  width: "100%",
  maxWidth: "600px"
};

<Image config={config} />
```

The component is memoized via `arePropsEqual`.

---

## Common Patterns & Examples

### 1. Basic responsive image

```json
{
  "id": "img_hero",
  "type": "ImageComponent",
  "config": {
    "src": "https://placehold.co/600x200?text=Hero+Banner&font=poppins",
    "alt": "Hero banner",
    "width": "100%",
    "maxWidth": "600px"
  }
}
```

### 2. Linked image

```json
{
  "id": "cta_image",
  "type": "ImageComponent",
  "config": {
    "src": "https://placehold.co/600x80?text=Shop+Now&font=poppins",
    "alt": "Shop Now",
    "innerLink": {
      "type": "url",
      "url": "https://example.com/shop",
      "target": "_blank"
    },
    "outlookWidth": "600"
  }
}
```

### 3. Mobile-optimized image

```json
{
  "id": "product_img",
  "type": "ImageComponent",
  "config": {
    "src": "https://placehold.co/256x256?text=Product&font=poppins",
    "alt": "Product",
    "width": "280px",
    "mobile": {
      "width": "100%",
      "maxWidth": "100%"
    }
  }
}
```

### 4. Data-bound image (inside repeater)

```json
{
  "id": "img-dynamic-bound",
  "type": "ImageComponent",
  "config": {
    "src": "https://placehold.co/256x256?text=Product&font=poppins",
    "alt": "Product name"
  },
  "bindings": {
    "propertyMap": {
      "config.src": "item.image_url",
      "config.alt": "item.name"
    }
  }
}
```

---

## Data Bindings

`Image` supports the `bindings` property on the `ComponentNode`, alongside `id`, `type`, and `config`. Leaf components do not support `dataList` or `itemAlias` — use those on a parent `Container`, `Column`, or `Row` to repeat the image. `visible` and `propertyMap` are fully supported.

```json
{
  "id": "dynamic-img",
  "type": "ImageComponent",
  "bindings": {
    "visible": "item.hasImage === true",
    "propertyMap": {
      "config.src": "item.imageUrl",
      "config.alt": "item.name"
    }
  },
  "config": {
    "src": "",
    "alt": "",
    "width": "100%",
    "maxWidth": "600px"
  }
}
```

| Property | Description |
|---|---|
| `visible` | JS expression evaluated against the Data Layer. Hides this component when falsy. |
| `propertyMap` | Maps component property paths (prefixed with `config.`) to Data Layer paths. |

> Bindable properties include `config.src`, `config.alt`, `config.width`, `config.maxWidth`, `config.backgroundColor`, and any other scalar `ImageConfig` field. `innerLink` itself cannot be bound via `propertyMap` — repeat the image inside a `Container` with `dataList` to vary links per item.

---

## Rules & Constraints

- `src` and `alt` are **required**.
- Prefer `innerLink` over the deprecated `href`/`target`.
- Use `outlookWidth` (numeric string, e.g. `"600"`) when you need reliable fixed-width rendering in Outlook Classic.
- `mobile` properties are **overrides only** — they do not reset desktop values unless explicitly set.
- Always provide meaningful `alt` text.
- For completely hidden images on mobile, use `mobile: { "hidden": true }`.
- Non-pixel values in `width`/`height` are handled gracefully but `px` or `%` are recommended for predictability.
- For image src in examples, use a real URL when one is available from the context. Otherwise, use a contextual placeholder URL (e.g. https://placehold.co/600x200?text=Hero+Banner&font=poppins) sized and labeled to match the use case. Never invent or guess image URLs.