Image
Imageレスポンシブ対応コンポーネント（AlexaImage）は、画像を表示します。標準的なアスペクト比（縦長や円形など）や角丸などの効果を使って画像を表示できます。
alexa-layoutsパッケージを読み込む
AlexaImageを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaImageはバージョン1.1.0で導入されました。
AlexaImageパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
center |
画像の配置設定です。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。デフォルトはcenterです。 |
1.1.0 |
|
|
文字列 |
square |
画像のアスペクト比です。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。デフォルトはsquareです。 |
1.1.0 |
|
|
ブール値 |
false |
trueの場合、画像の背後にその画像のコピーをぼかして表示し、Containerサイズに視覚的な統一感を持たせます。 |
1.1.0 |
|
|
none |
画像ブロックの高さです。 |
1.1.0 |
|
|
|
ブール値 |
true |
trueの場合、画像に角丸を使用します。 |
1.1.0 |
|
|
文字列 |
best-fit |
画像のサイズ調整を設定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。デフォルトはbest-fitです。 |
1.1.0 |
|
|
文字列 |
none |
画像のURLです。 |
1.1.0 |
|
|
none |
画像ブロックの幅です。 |
1.1.0 |
|
|
|
文字列 |
なし |
常に |
1.1.0 |
AlexaImageの例
この例では、viewportの中央に正方形を表示します。正方形はぼかしが入った画像のコピーで塗りつぶされ、この正方形に収まるように画像全体のサイズが調整されます。
{
"type": "Container",
"width": "100vw",
"height": "100vh",
"justifyContent": "center",
"alignItems": "center",
"items": [
{
"type": "AlexaImage",
"imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
"imageRoundedCorner": true,
"imageScale": "best-fit",
"imageAlignment": "center",
"imageWidth": "75vh",
"imageAspectRatio": "square",
"imageBlurredBackground": true
}
]
}