Image

Image

Imageレスポンシブ対応コンポーネント（AlexaImage）は、画像を表示します。標準的なアスペクト比（縦長や円形など）や角丸などの効果を使って画像を表示できます。

alexa-layoutsパッケージを読み込む

AlexaImageを使用するには、alexa-layoutsパッケージを読み込みます。

alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaImageはバージョン1.1.0で導入されました。

AlexaImageパラメーター

type以外のパラメーターはすべてオプションです。

名前 型 デフォルト 説明 追加されたバージョン

imageAlignment

文字列

center

画像の配置設定です。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。デフォルトはcenterです。

1.1.0

imageAspectRatio

文字列

square

画像のアスペクト比です。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。デフォルトはsquareです。

1.1.0

imageBlurredBackground

ブール値

false

trueの場合、画像の背後にその画像のコピーをぼかして表示し、Containerサイズに視覚的な統一感を持たせます。imageScaleがfillまたはbest-fillに設定されている場合、背景は表示されません。

1.1.0

imageHeight

ディメンション

none

画像ブロックの高さです。imageScale設定を使用すると、この高さに収まるように画像のサイズが調整されます。

1.1.0

imageRoundedCorner

ブール値

true

trueの場合、画像に角丸を使用します。

1.1.0

imageScale

文字列

best-fit

画像のサイズ調整を設定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。デフォルトはbest-fitです。

1.1.0

imageSource

文字列

none

画像のURLです。

1.1.0

imageWidth

ディメンション

none

画像ブロックの幅です。imageScale設定を使用すると、この幅に収まるように画像のサイズが調整されます。

1.1.0

type

文字列

なし

常にAlexaImageに設定されます。

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
    }
  ]
}