Image Component

Image component is used to display images, supporting lazy loading, error handling, preview and other features.

Basic Usage

Basic image component for displaying images, setting width, height and alternative text.

Show Code

Fit Container

Through the fit attribute, you can set how the image adapts to the container.

fill

contain

cover

none

scale-down

Show Code

Image Loading State

The component provides default loading and loading failed states, which can also be customized through slots.

Default Placeholder

Custom Loading

Load Failed

Show Code

Lazy Loading

Setting the lazy attribute enables image lazy loading, which loads only when scrolled into the visible area.

Scroll the container to see lazy loading effect (images load only when scrolled into view)

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Show Code

Image Preview

Setting the preview-src-list attribute enables image preview functionality.

Click to View Large Image

Preview Features

• Click image to view large preview
• Support ESC key to close preview
• Support keyboard arrow keys to switch images
• Support mouse wheel to zoom
• Support drag to view images

Show Code

Preview Configuration

You can configure preview zoom ratio, initial index, etc.

Zoom Rate:

Min Scale:

Max Scale:

Infinite Loop:

Image 1

Image 2

Image 3

Show Code

Image Component API

Attributes

Attribute	Description	Type	Accepted Values	Default
src	Image source URL	string	—	—
fit	How image fits container	string	fill / contain / cover / none / scale-down	—
alt	Image alternative text	string	—	—
referrerPolicy	Image referrer policy	string	—	—
lazy	Whether lazy loading	boolean	—	false
width	Image width	string / number	—	—
height	Image height	string / number	—	—
previewSrcList	Preview image list	Array<string>	—	[]
initialIndex	Preview initial image index	number	—	0
zIndex	Preview z-index	number	—	2000
infinite	Whether infinite loop preview	boolean	—	true
closeOnPressEscape	Whether to close preview on ESC	boolean	—	true
zoomRate	Zoom rate	number	—	1.2
minScale	Minimum zoom ratio	number	—	0.2
maxScale	Maximum zoom ratio	number	—	7

Events

Event Name	Description	Callback Parameters
load	Triggered when image loads successfully	(e: Event)
error	Triggered when image loading fails	(e: Error)
switch	Triggered when preview image switches	(index: number)
close	Triggered when preview closes	—
show	Triggered when preview opens	—

Slots

Slot Name	Description
placeholder	Placeholder content while image is loading
error	Content when image loading fails

Methods

Method Name	Description	Parameters
showPreview	Manually show preview	—

Style Variables

Image component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$image-placeholder-bg-color	Placeholder background color
$image-error-bg-color	Error state background color
$overlay-bg-color	Overlay background color