Image 图片

用于展示图片资源，支持自定义宽高、填充模式、位置、拖拽、懒加载、加载态和加载失败兜底。

示例

基础用法

填充模式

加载失败

API

Props

属性名	说明	类型	默认值
src	图片地址	string	''
width	图片宽度	number | string	'100%'
height	图片高度	number | string	'100%'
fit	图片缩放模式	'fill' | 'contain' | 'cover' | 'none' | 'scale-down'	'cover'
position	图片对齐位置，对应 object-position	string	''
draggable	图片是否可拖动	boolean	false

Events

事件名	说明	回调参数
load	图片加载成功触发	-
error	图片加载失败触发	-

Slots

插槽名	说明	作用域参数
error	自定义加载失败占位内容	-

注意事项

• src 变化时会重新进入加载流程，重置 loading 与失败占位状态。
• width 和 height 作用于图片容器，fit 和 position 作用于图片本身。
• width / height 接受数字或合法 CSS 值（如 '100px'、'50%'、'auto'、'30vw'）；数字会按设计视口宽度（1920px）自动转为 vw。
• src 为空或加载失败时会展示错误占位，默认占位为图片图标。
• 加载过程中会显示 MtLoading。
• 列表图片建议固定宽高并设置合适的 fit。
• 关键图片应结合业务提供加载失败兜底方案。