Image

Image With Different Fill Modes

Five fill types are available: fill, contain, cover, none, and scale-down.

在 Stackblitz 中打开

Image With Different Fill Positions

When the image is too large, provide different positions to display the partial left or right alignment of the picture.

在 Stackblitz 中打开

Image Of Different Shapes

Available in three shapes: square, round corner and round corner. You cannot use circle to show a perfect circle when the image is not equal in length and width.

在 Stackblitz 中打开

Component Status

在 Stackblitz 中打开

name	type	default	description	required
className	String	-	className of component	N
style	Object	-	CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties`	N
alt	String	-	-	N
error	TNode	-	Typescript：`string \| TNode`。see more ts definition	N
fallback	String	-	display `fallback` image on `src` loading failed. you can also use `error` to define more complex error content	N
fit	String	fill	options: contain/cover/fill/none/scale-down	N
lazy	Boolean	false	-	N
loading	TNode	-	Typescript：`string \| TNode`。see more ts definition	N
position	String	center	-	N
referrerpolicy	String	-	attribute of `<img>`, MDN Definition。options: no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url	N
shape	String	square	options: circle/round/square	N
src	String	-	-	N
srcset	Object	-	for `.avif` and `.webp` image url, load `srcset` before `src`。Typescript：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。see more ts definition	N
onError	Function		Typescript：`(context: { e: ImageEvent }) => void` trigger on image load failed	N
onLoad	Function		Typescript：`(context: { e: ImageEvent }) => void` trigger on image loaded	N