Image 图片

基本用法

INFO

使用object-fit指定图像如何适应容器的高度和宽度

图片预览

图像加载中/加载失败

INFO

使用slot="loading"和slot="failed"自定义图像加载中、加载失败后的显示

展示头像

INFO

可以通过rounded、radius来显示头像，rounded的优先级高于radius

图片懒加载

INFO

可以通过lazy属性来开启懒加载，如果lazy和lazyOptions.useIntersectionObserver均为true，则使用IntersectionObserver API；反之则使用img标签原生loading

API

Drawer Props

参数名	说明	类型	可选值	默认值
previewSrc	预览的图片 URL，未提供则使用src	string
preview	是否开启预览	boolean		false
width	图片原生width属性，指定width/height可以让浏览器预留位置加载图片，避免布局发生大的变化	string / number		0
height	图片原生height属性	string / number		0
lazy	是否开启懒加载	boolean		false
animated	是否开启动画效果	boolean		true
lazyOptions	懒加载参数	LazyOptions
objectFit	同 css object-fit 属性	string	fill / contain / cover / sacle-down / none	'fill'
showToolbar	是否显示预览的工具栏	boolean		true
showLoading	是否开启loading效果	boolean		true
rounded	是否圆形（显示为头像）	boolean		false
radius	圆角大小(50%时的效果等同于rounded)，当rounded为true时，忽略本参数	string / number		0

LazyOptions

参数名	说明	类型	可选值	默认值
useIntersectionObserver	是否使用 IntersectionObserver API 代替原生 loading 属性	boolean		true
intersectionRoot	root	Element/Documnet/null		null
intersectionRootMargin	rootMargin	string		'0px 0px 0px 0px'
intersectionThreshold	thresholds	number / number[]		0

Drawer Slots

插槽名	说明	子标签
failed	自定义图片加载失败时的内容
loading	自定义图片加载时的内容