Image 图片

该组件为 uni-app 的 image 组件的加强版，在集成了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角和形状等。

我们推荐您在任何使用图标场景的地方，都优先考虑使用这个小巧且精致实用的组件。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过图片的 width 宽和 height 高或者 customStyle 自定义样式，以及 src 路径即可使用。

<template>
    <fu-image width="100%" height="150" :src="src"></fu-image>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const src = ref<string>("");
</script>

图片裁剪、缩放的模式

通过 mode 属性设置裁剪模式，此模式用法与 uni-app 的 image 组件的 mode 属性完全一致，详见：Image，可选值有：

• scaleToFill 缩放 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
• aspectFit 缩放 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
• aspectFill 缩放 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix 缩放 宽度不变，高度自动变化，保持原图宽高比不变
• heightFix 缩放 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
• top 裁剪 不缩放图片，只显示图片的顶部区域
• bottom 裁剪 不缩放图片，只显示图片的底部区域
• center 裁剪 不缩放图片，只显示图片的中间区域
• left 裁剪 不缩放图片，只显示图片的左边区域
• right 裁剪 不缩放图片，只显示图片的右边区域
• top left 裁剪 不缩放图片，只显示图片的左上边区域
• top right 裁剪 不缩放图片，只显示图片的右上边区域
• bottom left 裁剪 不缩放图片，只显示图片的左下边区域
• bottom right 裁剪 不缩放图片，只显示图片的右下边区域

<fu-image src="" mode="widthFix"></fu-image>

图片形状

通过 shape 属性设置图片的形状，circle 为圆形，square 为方形

• 如果为方形时，还可以通过 radius/customStyle 属性设置圆角值

<fu-image src="" shape="circle"></fu-image>

懒加载

注意：此功能只对微信小程序、App、百度小程序、字节跳动小程序有效，默认开启。

<fu-image src="" lazyLoad></fu-image>

加载中提示

图片加载过程中，为加载中状态(默认显示一个小图标)，可以通过 loading 自定义插槽，结合 fusionsUI 的fu-loading 组件，实现加载的动画效果。

<fu-image src="">
    <template v-slot:loading>
        <fu-loading></fu-loading>
    </template>
</fu-image>

加载错误提示

图片加载失败时，默认显示一个错误提示图标，可以通过 error 自定义插槽，实现个性化的提示方式。

<fu-image src="">
    <template v-slot:error>
        <view>加载失败</view>
    </template>
</fu-image>

淡入动画

组件自带了加载完成时的淡入动画效果：

• 通过 fade 属性配置是否开启动画效果
• 通过 duration 属性配置动画的过渡时间，单位 ms

<fu-image src="" duration="500" fade></fu-image>

事件冒泡

默认情况下，组件是允许内部向外事件冒泡的，因为很多情况下，我们都希望点击图片，同时图片所在的父元素的点击事件也能触发。 如果您想避免事件冒泡，那么您可以在组件外面嵌套一个view，同时给它加上@tap.stop即可。

<!-- 点击图片将不会触发handlerClick -->
<view @tap="handlerClick">
    <view @tap.stop>
        <fu-image src=""></fu-image>
    </view>
</view>

API

Image Props

属性名	说明	类型	默认值	可选值
src	图片地址，强烈建议使用绝对或者网络路径	String	-	-
mode	图片裁剪、缩放的模式，详见上方图片裁剪、缩放的模式	String	aspectFill	-
width	宽度，单位任意，如果为数值，则为 px 单位	String｜Number	100%	-
height	高度，单位任意，如果为数值，则为 px 单位	String｜Number	auto	-
shape	图片形状，circle 为圆形，square 为方形	String	square	circle/square
radius	圆角值，单位任意，如果为数值，则为px单位	String｜Number	0	-
lazyLoad	是否开启懒加载，只对微信小程序、App、百度小程序、字节跳动小程序有效	Boolean	true	false
observeLazyLoad	是否开启observer懒加载，nvue不生效	Boolean	false	true
showMenuByLongpress	是否开启长按图片显示识别小程序码菜单，仅微信小程序有效	Boolean	true	false
loadingIcon	加载中的图标	String	image	-
errorIcon	加载失败的图标	String	error	-
showLoading	是否显示加载中的图标或者自定义的slot	Boolean	true	false
showError	是否显示加载失败的图标或者自定义的slot	Boolean	true	false
fade	是否开启动画效果	Boolean	false	-
webp	只支持网络资源，只对微信小程序有效	Boolean	false	true
duration	动画的过渡时间，单位 ms	Number	300	-
bgColor	背景颜色，用于深色页面加载图片时，为了和背景色融合	String	-	-
dim	定义图片模糊	String｜Number	0	0-100
customStyle	定义需要用到的外部样式	String｜Object	-	-

Image Events

事件名	说明	回调参数
click	点击图片时触发	() => void
error	图片加载失败时触发	err: 错误信息
load	图片加载完成时触发	-

Image Slots

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