Vielen Dank für deinen Besuch. Diese Seite ist nur in Englisch verfügbar.

Image

The Alexa image responsive component (AlexaImage) displays an image. You can display the image with standard aspect ratios (such as portrait or round) and effects such as rounded corners.

Import the alexa-layouts package

To use AlexaImage, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.1.0. AlexaImage was introduced in version 1.1.0.

AlexaImage parameters

All parameters except type are optional.

Name Type Default Description Version added

imageAlignment

String

center

Alignment setting for the image. Options are bottom, bottom-left, bottom-right, center, left, right, top, top-left, top-right. Default to center

1.1.0

imageAspectRatio

String

square

Aspect ratio of the image. Options are square, round, standard_landscape, standard_portrait, poster_landscape, poster_portrait, widescreen. Default to square

1.1.0

imageBlurredBackground

Boolean

false

When true, display a blurred version of the image to appear behind the image to create a visually consistent container size. Note that the background is not visible if the imageScale is set to fill or best-fill.

1.1.0

imageHeight

Dimension

none

Height of the image block. The image is scaled to fit within this height using the imageScale setting.

1.1.0

imageRoundedCorner

Boolean

true

When true, use rounded corners for the image

1.1.0

imageScale

String

best-fit

Scale setting for the image. Options are none, fill, best-fit, best-fill, best-fit-down. Default to best-fit

1.1.0

imageSource

String

none

URI for the image

1.1.0

imageWidth

Dimension

none

Width of the image block. The image is scaled to fit within this width using the imageScale setting.

1.1.0

type

String

None

Always set to AlexaImage

1.1.0

AlexaImage example

This example displays a square in the center of the viewport. The square is filled with a blurred copy of the image, then the full image is scaled to fit within the square.

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