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

Basic Usage


Load Failed

Lazy Load

Image Preview

Image Attributes

AttributeDescriptionTypeAccepted valuesDefault
altNative altstring--
fitIndicate how the image should be resized to fit its container, same as object-fitstringfill / contain / cover / none / scale-down-
hide-on-click-modalWhen enabling preview, use this flag to control whether clicking on backdrop can exit preview modebooleantrue / falsefalse
initial-indexThe initial preview image index, less than the length of url-listnumberint0
lazyWhether to use lazy loadbooleanfalse
preview-src-listallow big image previewArray-
referrer-policyNative referrerPolicystring--
srcImage source, same as nativestring-
scroll-containerThe container to add scroll listener when using lazy loadstring / HTMLElementThe nearest parent container whose overflow property is auto or scroll
z-indexset image preview z-indexNumber2000

Image Events

Event NameDescriptionParameters
loadSame as native load(e: Event)
errorSame as native error(e: Error)

Image Slots

placeholderTriggers when image load
errorTriggers when image load failed

ImageViewer Attributes

AttributeDescriptionTypeAcceptable ValueDefault
url-listPreview link listArray<string>-[]
z-indexPreview backdrop z-indexnumber / stringint / string<int>2000
initial-indexThe initial preview image index, less than or equal to the length of url-listnumberint0
infiniteWhether preview is infinitebooleantrue / falsetrue
hide-on-click-modalWhether user can emit close event when clicking backdropbooleantrue / falsefalse
append-to-bodywhether to append image itself to body. A nested parent element attribute transform should have this attribute set to truebooleanfalse

ImageViewer Events

Event nameDescriptionCallback parameter
closeEmitted when clicking on X button or when hide-on-click-modal enabled clicking on backdropNone
switchWhen switching images(val: number) switching target index