Image 图片

介绍

基于uniappimage组件,并提供加载中提示、加载失败提示。

代码演示

基础用法

基础用法与原生 uniappimage组件一致,可以设置 srcwidthheight 等属性。

 <z-image width="100" height="100" src="https://cdn.zebraui.com/zebra-ui/images/demo.jpg" />

填充模式

通过 mode 属性可以设置图片填充模式,等同于uniapp的 mode 属性,可选值见uniappimage组件。

<z-image
  width="150rpx"
  height="150rpx"
  :mode="item"
  :src="imageUrl"
/>

裁剪

通过 mode 属性可以设置图片裁剪位置,可选值见uniappimage组件。

<z-image
  width="150rpx"
  height="150rpx"
  :mode="item"
  :src="imageUrl"
/>

圆形图片

通过 round 属性可以设置图片变圆

 <z-image round width="100" height="100" :src="imageUrl" />

加载中提示

Image 组件提供了默认的加载中提示,支持通过 loading 插槽自定义内容。

 <z-image show-loading width="100" height="100" />
 <!-- 自定义加载中提示 -->
 <z-image show-loading width="100" height="100">
    <template #loading>
      <z-loading type="spinner" size="40rpx" />
    </template>
  </z-image>

加载失败提示

Image 组件提供了默认的加载失败提示,支持通过 error 插槽自定义内容。

<z-image show-error width="100" height="100" src="x" />
<!-- 自定义加载失败提示 -->
<z-image show-error width="100" height="100" src="x">
  <template #error> 加载失败 </template>
</z-image>

API

Props

参数说明类型默认值
src图片链接string-
mode图片裁剪、缩放的模式,等同于uniapp的 mode 属性stringfill
width宽度,默认单位为 pxnumber | string-
height高度,默认单位为 pxnumber | string-
radius圆角大小,默认单位为 pxnumber | string0
round是否显示为圆形booleanfalse
block是否将根节点设置为块级元素,默认情况下为 inline-block 元素booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
error-icon失败时提示的图标名称或图片链接,等同于 Icon 组件的 name 属性stringerror-fill
loading-icon加载时提示的图标名称或图片链接,等同于 Icon 组件的 name 属性stringimage-fill
icon-size加载图标和失败图标的大小number | string-
icon-prefix图标类名前缀,等同于 Icon 组件的 class-prefix 属性stringz-icon
customStyle自定义样式object-

mode 有效值

模式说明
缩放scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来。
缩放aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来。
缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变
缩放heightFix高度不变,宽度自动变化,保持原图宽高比不变
裁剪top不缩放图片,只显示图片的顶部区域
裁剪bottom不缩放图片,只显示图片的底部区域
裁剪center不缩放图片,只显示图片的中间区域
裁剪left不缩放图片,只显示图片的左边区域
裁剪right不缩放图片,只显示图片的右边区域
裁剪top left不缩放图片,只显示图片的左上边区域
裁剪top right不缩放图片,只显示图片的右上边区域
裁剪bottom left不缩放图片,只显示图片的左下边区域
裁剪bottom right不缩放图片,只显示图片的右下边区域

Events

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

Slots

名称说明
default自定义图片下方的内容
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
--z-image-placeholder-text-colorvar(--z-text-color-2)-
--z-image-placeholder-font-sizevar(--z-font-size-md)-
--z-image-placeholder-backgroundvar(--z-background)-
--z-image-loading-icon-size64rpx-
--z-image-loading-icon-colorvar(--z-gray-4)-
--z-image-error-icon-size64rpx-
--z-image-error-icon-colorvar(--z-gray-4)-