Image 图片
此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。 我们推荐您在任何使用图片场景的地方，都优先考虑使用这个小巧，精致而实用的组件。
平台差异说明
| App(vue) | App(nvue) | H5 | 微信小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
基本使用
配置图片的width宽和height高，以及src路径即可使用。
html
<template>
<su-image width="100%" height="300rpx" :src="src"></su-image>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const src = ref('https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png')
</script>裁剪模式
通过mode参数配置填充模式，此模式用法与uni-app的image组件的mode参数完全一致，详见：Image
html
<su-image src="https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png" mode="widthFix"></su-image>图片形状
- 通过
shape参数设置图片的形状，circle为圆形，square为方形 - 如果为方形时，还可以通过
border-radius参数设置圆角值
html
<su-image src="https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png" shape="circle"></su-image>懒加载
注意：此功能只对微信小程序、App、百度小程序、字节跳动小程序有效，默认开启。
html
<su-image src="https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png" :lazy-load="true"></su-image>加载中提示
图片加载过程中，为加载中状态(默认显示一个小图标)，可以通过loading自定义插槽，结合uView的u-loading组件，实现加载的动画效果。
html
<su-image src="https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png">
<template v-slot:loading>
<su-loading></u-loading>
</template>
</su-image>加载错误提示
图片加载失败时，默认显示一个错误提示图标，可以通过error自定义插槽，实现个性化的提示方式。
html
<su-image src="https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png">
<template v-slot:error>
<view style="font-size: 24rpx;">加载失败</view>
</template>
</su-image>淡入动画
组件自带了加载完成时的淡入动画效果：
- 通过
fade参数配置是否开启动画效果 - 通过
duration参数配置动画的过渡时间，单位ms
html
<su-image src="https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png" :fade="true" duration="450"></su-image>事件冒泡
默认情况下，组件是允许内部向外事件冒泡的，因为很多情况下，我们都希望点击图片，同时图片所在的父元素的点击事件也能触发。 如果您想避免事件冒泡，那么您可以在组件外面嵌套一个view，同时给它加上@tap.stop即可。
html
<!-- 点击图片将不会触发clickHandler -->
<view @tap="clickHandler">
<view @tap.stop>
<su-image src="https://ylw-common.oss-cn-shenzhen.aliyuncs.com/wechat/empty_query.png"></su-image>
</view>
</view>示例源码
点击可以查看 右侧演示页面的源码
API
Props
注意： 此组件为1.4.0版本加入的，如何查看版本？
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| src | 图片地址，强烈建议使用绝对或者网络路径 | String | - | - |
| mode | 裁剪模式，见上方说明 | String | aspectFill | - |
| width | 宽度，单位任意，如果为数值，则为rpx单位 | String | Number | 100% | - |
| height | 高度，单位任意，如果为数值，则为rpx单位 | String | Number | auto | - |
| shape | 图片形状，circle-圆形，square-方形 | String | square | circle |
| border-radius | 圆角值，单位任意，如果为数值，则为rpx单位 | String | Number | 0 | - |
| lazy-load | 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 | Boolean | true | - |
| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 | Boolean | true | - |
| loading-icon | 加载中的图标，或者小图片 | String | photo | - |
| error-icon | 加载失败的图标，或者小图片 | String | error-circle | - |
| show-loading | 是否显示加载中的图标或者自定义的slot | Boolean | true | false |
| show-error | 是否显示加载错误的图标或者自定义的slot | Boolean | true | false |
| fade | 是否需要淡入效果 | Boolean | true | false |
| webp | 只支持网络资源，只对微信小程序有效 | Boolean | false | true |
| duration | 搭配fade参数的过渡时间，单位ms | String | Number | 500 | - |
| bg-color | 背景颜色 | String | #f3f4f6 | - |
Slot
| 名称 | 说明 |
|---|---|
| loading | 自定义加载中的提示内容 |
| error | 自定义失败的提示内容 |
CellItem Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击图片时触发 | - |
| error | 图片加载失败时触发 | err: 错误信息 |
| load | 图片加载成功时触发 | - |