Image
An enhanced image component with lazy loading, fallback, preview lightbox, and gallery support.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
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
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.
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 — Display small circular user or entity images
- AspectRatio — Constrain images to a specific width-to-height ratio
- Carousel — Cycle through images in a slideshow format