简介

FsImage 是对小程序原生 image 组件的增强封装，提供以下特性：

• 支持多种图片尺寸预设（small/mid/original）
• 自定义圆角设置
• 图片加载状态处理（加载中、加载失败）
• 本地图片和网络图片统一处理
• 事件监听（加载成功、加载失败、点击事件）
• 自定义占位图

使用方法

1. 引入组件

在页面的 index.json 中配置：

"usingComponents": {
  "fs-image": "ava-ui/fxui/FsImage/FsImage"
}

2. 基本使用

<fs-image 
  src="图片路径" 
  size="small" 
  radius="10px"
  bind:load="onImageLoad"
  bind:error="onImageError"
  bind:click="onImageClick"
/>

代码演示

API

属性

参数	说明	类型	可选值	默认值
src	图片资源地址	string	-	-
size	图片尺寸预设	string	small/mid/original	small
radius	图片圆角	string	如 "10px"、"50%"	0px
imgStyle	自定义图片样式	string	-	-
placeholder	加载中的占位图	string	-	-
mode	图片裁剪、缩放的模式	string	同小程序image组件	scaleToFill
type	图片类型	string	default/head	default
npathWidth	自定义宽度	number	-	-
npathHeight	自定义高度	number	-	-

事件

事件名	说明	参数
bind:load	图片加载成功时触发	event
bind:error	图片加载失败时触发	event
bind:click	点击图片时触发	event

外部样式类

类名	说明
i-class	自定义组件根节点样式
error-class	图片加载失败时的样式

预览

打开预览