Image

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

Basic Usage

Placeholder

Load Failed

Lazy Load

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
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

Event 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

Source

ComponentDocs

Contributors