Image 图片

图片用于展示图像内容。mu-image 在原生图片能力之上提供尺寸、圆角、裁剪模式、懒加载与淡入效果等配置，并支持加载过程的回调。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-image 的用法，可按需组合。

最简用法只需指定图片地址。

<template>
  <mu-image src="/static/banner.png" />
</template>

尺寸与圆角

通过 width、height 指定尺寸，radius 设置圆角。

<mu-image src="/static/banner.png" width="100%" height="180px" :radius="8" />

裁剪模式

通过 mode 控制图片的裁剪与缩放方式。

<mu-image src="/static/avatar.png" mode="aspectFill" width="80" height="80" round />

懒加载与淡入

开启 lazy-load 后图片进入可视区域才加载，fade-show 控制加载完成后的淡入效果。

<mu-image src="/static/list-item.png" lazy-load fade-show width="100%" height="120px" />

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
src	图片地址	string	-
mode	图片裁剪与缩放模式	string	scaleToFill
width	图片宽度，数字按像素处理，也可传入带单位的字符串	string | number	-
height	图片高度，数字按像素处理，也可传入带单位的字符串	string | number	-
radius	圆角大小，数字按像素处理，也可传入带单位的字符串	string | number	0
round	是否显示为圆形	boolean	false
lazyLoad	是否开启懒加载	boolean	false
fadeShow	加载完成后是否淡入显示	boolean	false
webp	是否优先使用 webp 格式	boolean	true
showMenuByLongpress	长按是否弹出图片菜单	boolean	false
draggable	图片是否可拖拽	boolean	false
customClass	自定义类名，附加在图片根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于图片根节点	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
click	点击图片时触发	event: UniEvent
load	图片加载完成时触发	event: UniEvent
error	图片加载失败时触发	event: UniEvent