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

NameDescriptionTypeDefault
srcimage source, same as native.string
fitindicate how the image should be resized to fit its container, same as object-fit.'fill' | 'contain' | 'cover' | 'none' | 'scale'-down'
hide-on-click-modalwhen enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.booleanfalse
loading 2.2.3Indicates how the browser should load the image, same as native'eager' | 'lazy'
lazywhether to use lazy load.booleanfalse
scroll-containerthe container to add scroll listener when using lazy load.string | HTMLElementthe nearest parent container whose overflow property is auto or scroll.
altnative attribute alt.string
referrer-policynative attribute referrerPolicy.string
preview-src-listallow big image preview.string[]
z-indexset image preview z-index.number
initial-indexinitial preview image index, less than the length of url-list.number0
close-on-press-escapewhether the image-viewer can be closed by pressing ESCbooleantrue
preview-teleportedwhether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to true.booleanfalse

Image Events

NameDescriptionType
loadsame as native load.(e: Event) => void
errorsame as native error.(e: Error) => void
switchtrigger when switching images.(index: number) => void
closetrigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop.() => void

Image Slots

NameDescription
placeholdercustom placeholder content when image hasn't loaded yet.
errorcustom image load failed content.
viewerdescription of the image.

Image Viewer API

Image Viewer Attributes

NameDescriptionTypeDefault
url-listpreview link list.string[][]
z-indexpreview backdrop z-index.number | string
initial-indexthe initial preview image index, less than or equal to the length of url-list.number0
infinitewhether preview is infinite.booleantrue
hide-on-click-modalwhether user can emit close event when clicking backdrop.booleanfalse
teleportedwhether to append image itself to body. A nested parent element attribute transform should have this attribute set to true.booleanfalse

Image Viewer Events

NameDescriptionType
closetrigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop.() => void
switchtrigger when switching images.(index: number) => void

Image Viewer Methods

MethodDescriptionParameters
setActiveItemmanually switch imageindex of the image to be switched to, starting from 0

Source

ComponentDocs

Contributors