Image

Renders an image.

Node name : image

Attributes

Attribute	Type	Required	Default value	Description
name	string	true		Name of the image to display
size	string (small, medium, large, extralarge)	false	medium	Defines image size size
fit	string (contain, cover, fill)	false	contain	Defines how the image fills the box defined by its dimensions

Note

To display an image in a specific width and height, you cannot use the size attribute of the image component because it only accepts predefined sizes.
Instead, you have to use the layout:width and layout:height attributes to set the width and height of the image.

The fit attribute applies to every image, whether it is a monochrome image rendered as a mask or a multi-color image:

• contain: the whole image is visible and keeps its aspect ratio, which can leave empty space around it.
• cover: the image keeps its aspect ratio and fills the whole box, which can crop it.
• fill: the image is stretched to the box and its aspect ratio is not kept.

Note

Images are SVG files. An SVG keeps its own aspect ratio unless its root element declares preserveAspectRatio="none", so fill only stretches an SVG that declares it. Otherwise the result looks like contain.
An SVG that declares preserveAspectRatio="none" must also declare width and height on its root element. Without them the browser considers that it has no aspect ratio, and contain and cover then behave like fill.

Examples

<image name="Customer" size="large" />

<image name="Logo" layout:width="1280" layout:height="768" />

<image name="Banner" fit="cover" layout:width="600" layout:height="100" />