Image 图片

介绍

展示图片，支持图片懒加载、加载中提示、加载失败提示。

基础用法

与 image 标签一致，通过 src 属性设置图片地址。

<vd-image
  src="http://vital-design.cn/ui/static/exh-1.jpg"
  width="100"
  height="100"
/>

填充模式

通过 mode 属性设置图片填充模式，具体可前往 uniapp 官网 Image 查看。

widthFix / heightFix 下，对应的 height / width 仅作加载前占位；加载完成后根节点该方向改为 auto，由原生模式按图片比例撑开。

<vd-image
  src="http://vital-design.cn/ui/static/exh-1.jpg"
  width="100%"
  height="100"
  mode="widthFix"
/>

加载中提示

图片加载/未定义时，会展示 loading 加载中，支持通过 loading 插槽自定义内容。

<vd-image width="100" height="100" />

<vd-image width="100" height="100">
  <template #loading>加载中...</template>
</vd-image>

加载失败提示

图片加载失败时，会展示 error 加载失败，支持通过 error 插槽自定义内容。

<vd-image src="xx" width="100" height="100" />
<vd-image src="xx" width="100" height="100">
  <template #error>加载失败</template>
</vd-image>

懒加载

开启 lazy-load 后，图片进入视口才赋真实 src 并开始请求（基于可见监听，相对页面视口）。适用于长列表；自定义滚动容器内若监听不到，可关闭懒加载或保证节点相对视口可相交。

<vd-image
  lazy-load
  src="http://vital-design.cn/ui/static/exh-1.jpg"
  width="100"
  height="100"
/>

淡入展示

默认开启 fade-show：图片加载完成后淡入。传 false 可关闭。

<vd-image
  :fade-show="false"
  src="http://vital-design.cn/ui/static/exh-1.jpg"
  width="100"
  height="100"
/>

API

Props

参数	说明	类型	默认值
src	图片地址	string	-
mode	填充模式	ImageMode	'scaleToFill'
width	宽度；heightFix 时加载前可作占位	string | number	-
height	高度；widthFix 时加载前可作占位	string | number	-
radius	边框半径	string | number	-
show-loading	是否展示加载中提示	boolean	true
loading-type	加载中类型	LoadingType	'spinner'
show-error	是否展示加载失败提示	boolean	true
error-icon	加载失败图标	IconName	'pic-error'
icon-size	加载中、加载错误图标大小	number | string	30
lazy-load	是否开启懒加载（进视口后再请求）	boolean	false
fade-show	图片加载完成后是否淡入展示	boolean	true
webp	不支持 webp 时是否单独启用（仅网络资源）	boolean	false
draggable	是否能拖动图片	boolean	true
show-menu-by-longpress	开启长按图片显示识别小程序码菜单	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-image	点击图片时触发	MouseEvent
load	图片加载完成时触发	Event
error	图片加载失败时触发	Event

Slots

名称	说明
default	图片下方内容
loading	加载中
error	加载失败