Search documentation of phoenix_kit

# PhoenixKitWeb.Components.Blogging.Image (phoenix_kit v1.6.19)

View Source

Image component with lazy loading and responsive sizing.

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

## Usage

### With direct URL:

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

### With PhoenixKit Storage file ID:

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

## Attributes

- `src` - Direct image URL (takes precedence over file_id)
- `file_id` - PhoenixKit Storage file ID
- `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)

# Summary

## Functions

render(assigns)

# Functions

# render(assigns)

## Attributes

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