Image 图片

预览

01:38



---

组件名：rice-image

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

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

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

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

圆角图片

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

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

<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 插槽自定义内容。

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

加载失败提示

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

<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值即可

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

预览多张图片

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

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

Event

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

Slots

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

类型定义

组件导出如下类型

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