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