Image
An enterprise-level image component with support for lazy loading, preview, and error fallback.
Basic Usage
Display a basic image.
Example
Object Fit
Use the fit prop to control how the image should be resized to fit its container, just like the native object-fit CSS property.
Example
Image Preview
Use the preview prop to enable a full-screen image preview. You can also provide an array of images to preview-src-list to allow cycling through multiple images.
Example
Lazy Loading
Use the lazy prop to defer loading the image until it enters the viewport. A skeleton screen is automatically displayed while the image is loading.
Scroll down to see lazy loaded image / Scroll down to see lazy loaded images
Example
Watermark
Use the watermark prop to add a watermark to the image. You can pass a string or a configuration object.
Example
Error Fallback
When an image fails to load, a default error fallback will be displayed automatically.
Example
API
BrImage
Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | - | The source URL of the image |
| alt | string | - | The alternative text of the image |
| fit | string | 'cover' | How the image should fit its container: fill, contain, cover, none, scale-down |
| lazy | boolean | false | Whether to use lazy loading |
| preview | boolean | false | Whether to enable image preview |
| previewSrcList | string[] | [] | List of image URLs for the preview gallery |
| initialIndex | number | 0 | The initial index of the preview gallery |
| zIndex | number | 100 | The z-index of the preview overlay |
| watermark | string | object | - | Watermark text or configuration object |
| rounded | string | 'none' | Border radius: none, sm, md, lg, xl, 2xl, full |
| shadow | string | 'none' | Box shadow: none, sm, md, lg, xl |
| bordered | boolean | false | Whether to show a border |
Events
| Name | Type | Description |
|---|---|---|
| load | (e: Event) => void | Emitted when the image loads successfully |
| error | (e: Event) => void | Emitted when the image fails to load |
| show | () => void | Emitted when the preview is opened |
| close | () => void | Emitted when the preview is closed |
| switch | (index: number) => void | Emitted when switching images in the preview gallery |