PhoenixKit.Modules.Publishing.Components.Image (phoenix_kit v1.7.38)

Copy Markdown 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.