Image 图片

图片容器，在保留所有原生 img 的特性，自定义占位、加载失败等功能的同时，图片预览等功能。

基础用法

可通过fit确定图片如何适应到容器框，同原生 object-fit

• 复制代码
• 显示代码

加载失败

可通过 fallback-src来定义加载失败时显示的图片。error-text 来定义加载失败时显示的文字。使用error插槽自定义加载失败时的内容。

• 复制代码
• 显示代码

预览

可通过 previewSrcList 来定义预览图片列表。preview 来开启图片预览功能。previewTextColor 来定义预览文字颜色。

预览

预览

• 复制代码
• 显示代码

自定义大小

可通过 width 和 height 来定义图片的大小。

• 复制代码
• 显示代码

让我帮你整理 Image 组件的事件和属性表格：

属性（Props）

属性名	说明	类型	可选值	默认值
size	图片尺寸	string	-	""
src	图片源地址	string	-	""
fit	图片适应容器的方式	string	fill/contain/cover/none/scale-down	""
fallbackSrc	加载失败时的备选图片	string	-	""
alt	图片描述	string	-	""
width	图片宽度	number/string	-	100
height	图片高度	number/string	-	100
radius	圆角大小	number/string	-	0
errorText	加载失败时显示的文本	string	-	"加载失败"
isZoomed	是否缩放	boolean	-	false
preview	是否可预览	boolean	-	false
previewSrcList	预览图片列表	array	-	[]
previewTextColor	预览文本颜色	string	-	"#fff"

事件（Events）

事件名	说明	回调参数
error	图片加载失败时触发	-
load	图片加载成功时触发	-
close	预览窗口关闭时触发	(scale: number)
prev	切换至上一张图片时触发	(index: number)
next	切换至下一张图片时触发	(index: number)
rotate	图片旋转时触发	(rotate: number)
zoomIn	图片放大时触发	(e: Event)
zoomOut	图片缩小时触发	(scale: number)

插槽（Slots）

插槽名	说明
error	自定义加载失败内容
content	自定义图片内容