Image

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

Basic Usage

Indicate how the image should be resized to fit its container by fit, same as native object-fit.

fill
contain
cover
none
scale-down

Placeholder

Custom placeholder content when image hasn't loaded yet by slot = placeholder

Default
Custom
Loading...

Load Failed

Custom failed content when error occurs to image load by slot = error

Default
Custom

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.

Use lazy load by lazy = true. Image will load until scroll into view when set. You can indicate scroll container that adds scroll listener to by scroll-container. If undefined, will be the nearest parent container whose overflow property is auto or scroll.

Image Preview

allow big image preview by setting previewSrcList prop. You can initialize the position of the first picture previewed by initial-index. The default initial position is 0.

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.enum''
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.enum
lazywhether to use lazy load.booleanfalse
scroll-containerthe container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load.string / object
altnative attribute alt.string
referrerpolicynative attribute referrerPolicy.string
crossoriginnative attribute crossorigin.enum
preview-src-listallow big image preview.object[]
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 ESC.booleantrue
preview-teleportedwhether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to true.booleanfalse
infinitewhether the viewer preview is infinite.booleantrue
zoom-ratethe zoom rate of the image viewer zoom event.number1.2
min-scale 2.4.0the min scale of the image viewer zoom event.number0.2
max-scale 2.4.0the max scale of the image viewer zoom event.number7

Image Events

NameDescriptionType
loadsame as native load.Function
errorsame as native error.Function
switchtrigger when switching images.Function
closetrigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop.Function
showtrigger when the viewer displaysFunction

Image Slots

NameDescription
placeholdercustom placeholder content when image hasn't loaded yet.
errorcustom image load failed content.
viewercustom content when image preview.

Image Viewer API

Image Viewer Attributes

NameDescriptionTypeDefault
url-listpreview link list.object[]
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
zoom-rate 2.2.27the zoom rate of the image viewer zoom event.number1.2
min-scale 2.4.0the min scale of the image viewer zoom event.number0.2
max-scale 2.4.0the max scale of the image viewer zoom event.number7
close-on-press-escapewhether the image-viewer can be closed by pressing ESC.booleantrue

Image Viewer Events

NameDescriptionType
closetrigger when clicking on close button or when hide-on-click-modal enabled clicking on backdrop.Function
switchtrigger when switching images.Function
rotate 2.3.13trigger when rotating images.Function

Image Viewer Exposes

NameDescriptionType
setActiveItemmanually switch imageFunction

Source

ComponentStyleDocs

Contributors