Image

Enhanced image display with multiple fit modes and lazy loading.

Examples

Fit modes

Stretch to fill

scaleToFill

Fit inside

aspectFit

Cover

aspectFill

Image fit

Use the `mode` prop to control how the image fits its box

<m-image src="/photo.jpg" mode="scaleToFill" style="width:100px;height:100px;" />
<m-image src="/photo.jpg" mode="aspectFit" style="width:100px;height:100px;" />
<m-image src="/photo.jpg" mode="aspectFill" style="width:100px;height:100px;" />

Lazy loading

lazy-load

lazy-load

Lazy loading

With `lazy-load`, images load when they enter the viewport

<m-image src="/photo1.jpg" lazy-load style="width:80px;height:80px;" />
<m-image src="/photo2.jpg" lazy-load style="width:80px;height:80px;" />

API

Props

属性	说明	类型	默认值
src	Image URL	string	-
mode	Fit / scale mode	string	scaleToFill
lazy-load	Whether to lazy load	boolean	false

mode values

Value	Description
scaleToFill	Stretch to fill the box (may distort)
aspectFit	Scale uniformly; show the full image (may letterbox)
aspectFill	Scale uniformly; crop to fill
widthFix	Fixed width; height follows aspect ratio
heightFix	Fixed height; width follows aspect ratio
top / bottom / center / left / right	No scaling; align and crop to position

Events

属性	说明	类型	默认值
load	Fired when the image loads successfully	{ width, height }	-
error	Fired when the image fails to load	{ src }	-