Image 图片

介绍

基于uniapp的image组件，并提供加载中提示、加载失败提示。

基础用法

基础用法与原生 uniapp的image组件一致，可以设置 src、width、height 等属性。

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

填充模式

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

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

裁剪

通过 mode 属性可以设置图片裁剪位置，可选值见uniapp的image组件。

<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>

Props

mode 有效值

Events

Slots

样式变量

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