Skip to content
Lattice

Image

Image::make($src) renders an image. Clicking it opens the full-size image in a lightbox overlay — press Esc, click the backdrop, or use the close button to dismiss it.

Stack::make()->direction('row')->gap(Gap::Small)->schema([
  Image::make('https://picsum.photos/id/1060/600/400')
      ->alt('Coffee brewing setup')
      ->size(96),
  Image::make('https://picsum.photos/id/1080/600/400')
      ->alt('Strawberries')
      ->size(96)
      ->circular(),
  Image::make('https://picsum.photos/id/1084/600/400')
      ->alt('Walrus resting')
      ->size(96)
      ->previewable(false),
]);

Options

Section titled “Options”
  • ->alt($text) sets the accessible description. Always set it — it labels both the inline image and the lightbox for screen readers.
  • ->size(96) fixes the rendered size in pixels (square). Without it the image keeps its natural size.
  • ->circular() clips the image to a circle. For people, prefer the Avatar component and its initials fallback.
  • ->previewable(false) turns the lightbox off and renders a plain image.