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

NameDescription
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