rice-ui

暗黑模式

Image 图片 ​

手机扫码预览
01:50
组件名：rice-image

此组件为 uni-appx 的 image 组件的加强版，在继承了原有功能外，还支持加载中、加载失败提示、圆角值和形状等。

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

基础用法 ​

通过 src 设置图片的地址，通过 width 和 height 设置图片的宽高。

vue
<rice-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />

圆角图片 ​

通过 radius 属性可以设置图片的圆角值，如果需要圆形图片，设置 round 为 true 即可

vue
<rice-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" radius="12px" />
<rice-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" round />

填充模式 ​

通过 mode 设置图片的缩放模式，具体值见 image的mode值

vue
<template>
  <view class="demo-image__item" v-for="mode in imageMode" :key="mode">
    <rice-image width="80" height="80" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" :mode="mode" />
    <text class="text">{{mode}}</text>
  </view>
</template>

<script setup>
const imageMode = ref(['aspectFit', 'aspectFill', 'widthFix', 'heightFix'])
</script>

加载中提示 ​

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

html
<rice-image width="100" height="100" src=""/>
<rice-image width="100" height="100">
  <template #loading>
    <rice-loading color="#8d9095" />
  </template>
</rice-image>

加载失败提示 ​

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

html
<rice-image width="100" height="100" src="https://error.png" />
<rice-image width="100" height="100" src="https://error.png">
  <template #error>
    <text class="text">加载失败</text>
  </template>
</rice-image>

图片预览 ​

Image 组件提供了图片预览功能，设置preview值即可

html
<rice-image preview width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
radius="8px" />

预览多张图片 ​

如果需要预览多张图片，可以通过 preview-src-list 属性设置

vue
<template>
  <rice-image width="100" height="100" :src="previewSrcList[0]" :preview-src-list="previewSrcList" radius="8px" />
  <rice-image width="100" height="100" :src="previewSrcList[1]" :preview-src-list="previewSrcList" radius="8px" />
</template>

<script setup>
const previewSrcList = ref(['https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg', 'https://hellouniappx.dcloud.net.cn/web/static/test-image/logo.png'])
</script>

API ​

Props ​

参数说明类型默认值
src图片地址string-
mode图片裁剪、缩放的模式，等同于官方image组件的modestringscaleToFill
width宽度string|number-
height高度booleanfalse
round是否为圆形booleanfalse
radius圆角值string|number-
show-error是否展示图片加载失败的提示booleantrue
show-loading是否展示图片加载中的提示booleantrue
error-icon失败时提示的图标名称图片链接string-
icon-size加载图片和失败图片的大小string-
icon-color加载图片和失败图片的颜色string-
bg-color背景色string-
preview是否开启图片预览功能booleanfalse
preview-src-list要进行预览图片的合集，如果只是单张图片预览，直接设置preview为true即可string[]-
preview-index初始预览图像索引，要小于previewSrcList的长度number-
lazy-load懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改boolean-
fade-show图片显示动画效果，等同于官方image组件的fadeShowstring-
webp是否支持 webP 格式，等同于官方image组件的webpboolean-
show-menu-by-longpress开启长按图片显示识别小程序码菜单，等同于官方image组件的showMenuByLongpressboolean-
draggable鼠标长按是否能拖动图片(仅H5平台)，等同于官方image组件的draggableboolean-
custom-style自定义样式boolean-

Event ​

事件名说明回调参数
click点击事件-
load图片加载完成时触发e:UniImageLoadEvent
error图片加载错误时触发e:UniImageErrorEvent

Slots ​

名称说明
loading自定义加载中的提示内容
error自定义加载失败的提示内容

类型定义 ​

组件导出如下类型

ts
//组件类型
const iconRef=ref<RiceImageComponentPublicInstance|null>(null)