Image 图片

介绍

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

基础用法

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

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

填充模式

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

<vd-image
  src="http://vital-design.cn/ui/static/exh-1.jpg"
  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>

API

Props

参数	说明	类型	默认值
src	图片地址	string	-
mode	填充模式	ImageMode	'scaleToFill'
width	宽度	string | number	-
height	高度	string | number	-
radius	边框半径	string | number	-
show-loading	是否展示加载中提示	boolean	true
loading-type	加载中类型	LoadingType	'spinner'
show-error	是否展示加载失败提示	boolean	true
error-icon	加载失败图标	IconsName	'pic-error'
icon-size	加载中、加载错误图标大小	number | string	30
lazy-load	是否开启图片懒加载	boolean	false
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	加载失败