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 |
|---|---|---|---|---|
|
|
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 |
|
|
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 |
|
|
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 |
1.1.0 |
|
|
none |
Height of the image block. The image is scaled to fit within this height using the |
1.1.0 |
|
|
|
Boolean |
true |
When true, use rounded corners for the image |
1.1.0 |
|
|
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 |
|
|
String |
none |
URI for the image |
1.1.0 |
|
|
none |
Width of the image block. The image is scaled to fit within this width using the |
1.1.0 |
|
|
|
String |
None |
Always set to |
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
}
]
}