# Image

Source: https://lumeo.nativ.sh/components/image

# Image

An enhanced image component with lazy loading, fallback, preview lightbox, and gallery support.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Image />

## When to Use

-   Displaying images with click-to-zoom preview lightbox
-   Photo galleries with grid layout and navigation
-   Image previews with lazy loading for performance optimization
-   Any image display that needs fallback handling on load errors

Preview Code

Basic Image

![Sample image](https://picsum.photos/seed/lumeo-doc/400/250)

Preview Code

With Preview

![Click to preview](https://picsum.photos/seed/preview-doc/400/250)

Preview Code

Gallery

![Image 1](https://picsum.photos/seed/g1/300/200)![Image 2](https://picsum.photos/seed/g2/300/200)![Image 3](https://picsum.photos/seed/g3/300/200)![Image 4](https://picsum.photos/seed/g4/300/200)

**Mobile (rc.49).** Set `Zoomable="true"` to enable native pinch-to-zoom on touch devices via the `touch-action: pinch-zoom` hint and a pointer-event zoom gesture.

**Fullscreen gestures (rc.52).** `ImageGallery` supports touch gestures in the fullscreen preview: swipe left/right (≥ 60 px) to navigate between images, and two-finger pinch to zoom (25 %–300 %). Set `GesturesEnabled="false"` to opt out.

Preview Code

Pinch-to-Zoom

![Pinch to zoom on mobile](https://picsum.photos/seed/zoom-doc/400/250)

## API Reference

### Image

Property

Type

Default

Description

Src

string?

—

Image source URL.

Preview

bool

false

Enable click-to-preview lightbox.

Lazy

bool

false

Enable native lazy loading.

Width

string?

—

Image width in pixels.

Height

string?

—

Image height in pixels.

Alt

string?

—

Alternative text for the image.

Fallback

string?

—

Fallback image URL on error.

Zoomable

bool

false

Enables pinch-to-zoom on touch devices (rc.49).

### ImageGallery

Property

Type

Default

Description

Images

List<ImageItem>?

—

List of images to display.

Columns

int

3

Grid columns count.

Gap

string?

null

Spacing between gallery items (Tailwind gap class, e.g. "4").

GesturesEnabled

bool

true

Enables swipe (prev/next) and pinch-zoom gestures in the fullscreen preview on touch devices (rc.52).

## Related Components

-   [Avatar](/components/avatar) — Display small circular user or entity images
-   [AspectRatio](/components/aspect-ratio) — Constrain images to a specific width-to-height ratio
-   [Carousel](/components/carousel) — Cycle through images in a slideshow format