# `PhoenixKit.Modules.Shared.Components.Image`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.165/lib/modules/shared/components/image.ex#L1)

Image component with lazy loading and responsive sizing.

Supports both direct URLs and PhoenixKit Storage file UUIDs with automatic variant selection.

## Usage

### With direct URL:

    <Image src="/path/to/image.jpg" alt="Description" />

### With PhoenixKit Storage file UUID:

    <Image file_uuid="018e3c4a-9f6b-7890-abcd-ef1234567890" alt="Description" />
    <Image file_uuid="018e3c4a-9f6b-7890-abcd-ef1234567890" file_variant="thumbnail" alt="Description" />

## Attributes

- `src` - Direct image URL (takes precedence over file_uuid)
- `file_uuid` - PhoenixKit Storage file UUID
- `file_variant` - Storage variant to use (default: "original")
  - Images: "original", "thumbnail", "small", "medium", "large"
- `alt` - Alt text for accessibility (required)
- `class` - Additional CSS classes (optional)

# `render`

## Attributes

* `attributes` (`:map`) - Defaults to `%{}`.
* `variant` (`:string`) - Defaults to `"default"`.
* `content` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*