PhoenixKit.Modules.Shared.Components.Image (phoenix_kit v2.35.0)

Copy Markdown View Source

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. Left out on a file_uuid image, it is the file's own alt text in the page's language (Storage.translated_alt_by_uuid/2); pass alt="" for a decorative image
  • 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.