Image

Besides the native features of img, support lazy load, custom placeholder and load failure, etc.

Basic Usage

Placeholder

Load Failed

Lazy Load

TIP

Native loading has been supported since 2.2.3, you can use loading = "lazy" to replace lazy = true.

If the current browser supports native lazy loading, the native lazy loading will be used first, otherwise will be implemented through scroll.

Image Preview

Image API

Image Attributes

Name	Description	Type	Default
src	image source, same as native.	`string`	''
fit	indicate how the image should be resized to fit its container, same as object-fit.	`enum`	''
hide-on-click-modal	when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.	`boolean`	false
loading 2.2.3	Indicates how the browser should load the image, same as native.	`enum`	—
lazy	whether to use lazy load.	`boolean`	false
scroll-container	the container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load.	`string` / `object`	—
alt	native attribute `alt`.	`string`	—
referrerpolicy	native attribute referrerPolicy.	`string`	—
crossorigin	native attribute crossorigin.	`enum`	—
preview-src-list	allow big image preview.	`object`	[]
z-index	set image preview z-index.	`number`	—
initial-index	initial preview image index, less than the length of `url-list`.	`number`	0
close-on-press-escape	whether the image-viewer can be closed by pressing ESC.	`boolean`	true
preview-teleported	whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`.	`boolean`	false
infinite	whether the viewer preview is infinite.	`boolean`	true
zoom-rate	the zoom rate of the image viewer zoom event.	`number`	1.2
min-scale 2.4.0	the min scale of the image viewer zoom event.	`number`	0.2
max-scale 2.4.0	the max scale of the image viewer zoom event.	`number`	7

Image Events

Name	Description	Type
load	same as native load.	`Function`
error	same as native error.	`Function`
switch	trigger when switching images.	`Function`
close	trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop.	`Function`
show	trigger when the viewer displays	`Function`

Image Slots

Name	Description
placeholder	custom placeholder content when image hasn't loaded yet.
error	custom image load failed content.
viewer	custom content when image preview.

Image Viewer API

Image Viewer Attributes

Name	Description	Type	Default
url-list	preview link list.	`object`	[]
z-index	preview backdrop z-index.	`number` / `string`	—
initial-index	the initial preview image index, less than or equal to the length of `url-list`.	`number`	0
infinite	whether preview is infinite.	`boolean`	true
hide-on-click-modal	whether user can emit close event when clicking backdrop.	`boolean`	false
teleported	whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.	`boolean`	false
zoom-rate 2.2.27	the zoom rate of the image viewer zoom event.	`number`	1.2
min-scale 2.4.0	the min scale of the image viewer zoom event.	`number`	0.2
max-scale 2.4.0	the max scale of the image viewer zoom event.	`number`	7
close-on-press-escape	whether the image-viewer can be closed by pressing ESC.	`boolean`	true

Image Viewer Events

Name	Description	Type
close	trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop.	`Function`
switch	trigger when switching images.	`Function`
rotate 2.3.13	trigger when rotating images.	`Function`

Image Viewer Exposes

Name	Description	Type
setActiveItem	manually switch image	`Function`

Source

Component • Docs

Contributors

Empty

Infinite Scroll

Image #

Basic Usage #

Placeholder #

Load Failed #

Lazy Load #

Image Preview #

Image API #

Image Attributes #

Image Events #

Image Slots #

Image Viewer API #

Image Viewer Attributes #

Image Viewer Events #

Image Viewer Exposes #

Source #

Contributors #