Image 图片

增强的图片展示组件，支持多种裁剪模式和懒加载。

代码演示

裁剪模式

拉伸填满

scaleToFill

完整显示

aspectFit

裁剪填满

aspectFill

图片裁剪

通过 mode 属性控制图片在容器内的展示方式

<m-image src="/photo.jpg" mode="scaleToFill" style="width:100px;height:100px;" />
<m-image src="/photo.jpg" mode="aspectFit" style="width:100px;height:100px;" />
<m-image src="/photo.jpg" mode="aspectFill" style="width:100px;height:100px;" />

懒加载

lazy-load

lazy-load

懒加载

设置 lazy-load 后图片进入视口才开始加载

<m-image src="/photo1.jpg" lazy-load style="width:80px;height:80px;" />
<m-image src="/photo2.jpg" lazy-load style="width:80px;height:80px;" />

API

属性

属性	说明	类型	默认值
src	图片资源地址	string	-
mode	图片裁剪、缩放模式	string	scaleToFill
lazy-load	是否懒加载	boolean	false

mode 可选值

值	说明
scaleToFill	拉伸填满容器（可能变形）
aspectFit	保持比例缩放，完整显示（可能有留白）
aspectFill	保持比例缩放，裁剪填满
widthFix	宽度不变，高度自适应
heightFix	高度不变，宽度自适应
top / bottom / center / left / right	不缩放，按位置对齐裁剪

事件

属性	说明	类型	默认值
load	图片加载成功	{ width, height }	-
error	图片加载失败	{ src }	-