Introduction

FsImage is an enhanced wrapper around the mini-program native image component, providing the following features:

• Supports multiple image size presets (small/mid/original)
• Custom corner radius settings
• Image load state handling (loading, load failure)
• Unified handling of local and network images
• Event listening (load success, load failure, click event)
• Custom placeholder image

Usage

1. Import the component

Configure it in the page's index.json:

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

2. Basic usage

<fs-image 
  src="Image path" 
  size="small" 
  radius="10px"
  bind:load="onImageLoad"
  bind:error="onImageError"
  bind:click="onImageClick"
/>

Code demos

API

Properties

Parameter	Description	Type	Optional values	Default
src	Image resource URL	string	-	-
size	Image size preset	string	small/mid/original	small
radius	Image corner radius	string	e.g. "10px", "50%"	0px
imgStyle	Custom image style	string	-	-
placeholder	Placeholder image while loading	string	-	-
mode	Image crop/scale mode	string	Same as the mini-program image component	scaleToFill
type	Image type	string	default/head	default
npathWidth	Custom width	number	-	-
npathHeight	Custom height	number	-	-

Events

Event name	Description	Parameters
bind:load	Fires when the image loads successfully	event
bind:error	Fires when the image fails to load	event
bind:click	Fires when the image is clicked	event

External style classes

Class name	Description
i-class	Custom style for the component root node
error-class	Style applied when the image fails to load

Preview

打开预览