Image 画像

拡張された画像表示コンポーネントです。複数の切り抜きモードと遅延読み込みに対応します。

コードデモ

切り抜きモード

引き伸ばしで埋める

scaleToFill

全体表示

aspectFit

トリミングで埋める

aspectFill

画像の切り抜き

`mode` プロパティで、容器内の表示方法を制御します

<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-load

lazy-load

遅延読み込み

`lazy-load` を指定すると、表示領域に入ったときに読み込みます

<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

プロパティ

属性	说明	类型	默认值
src	画像の URL	string	-
mode	切り抜き・拡大縮小モード	string	scaleToFill
lazy-load	遅延読み込みにするか	boolean	false

mode の候補

値	説明
scaleToFill	引き伸ばして容器を埋める（歪むことがあります）
aspectFit	縦横比を保ち、全体を表示（余白が出ることがあります）
aspectFill	縦横比を保ち、はみ出しをトリミングして埋める
widthFix	幅を固定し、高さを縦横比に合わせる
heightFix	高さを固定し、幅を縦横比に合わせる
top / bottom / center / left / right	拡大縮小せず、位置に合わせてトリミング

イベント

属性	说明	类型	默认值
load	画像の読み込み成功時	{ width, height }	-
error	画像の読み込み失敗時	{ src }	-