Skip to content 
The slotted
Image - Web Component
The Image component can be used imported from:
Playground
Parameters
...
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | imgsource |
Parameters use
Image
image-src
The image-src parameter is used to define the image URL to be displayed. GIF images can also be used, but we recommend to convert them into .webp for optimization:
image-alt
The alt attribute of the image for accessibility
config
The config parameter is used to define the aspect ratio for the image. Possible values are: full-width, 3:2, 1:1, 4:3, 16:9.
The 1:1 aspect ratio can be rounded by adding the round value to the config or by simply use round value (e.g. config="1:1:round" or config="round").
size
The size parameter is used to define the image column size. Possible values are: 2, 3, 4, 5, 6.
copyright
The copyright parameter is used to add a short copyright text information, if necessary.
sources
We can also use the slotted configuration via the default slot using <source> tags:
Special uses
The slotted <img>
This component can receive the <img> tag in the picture slot and still maintain the config:
Attention!
This approach has limitations. Notice that configurations are not being passed. This is only recommended for CMS functionalities like images selector or Drag and Drop platforms.
Always return a <picture>or <img> tag on the top level.
Test it in your setup.
Caption
We can use the Image together with the Figure
Browser support
Detected engine:
Chromium
Webkit
Gecko