Skip to content 
The slotted
Image - Web Component
The Image component can be used imported from:
Playground
Parameters
The Web component uses the <z-image> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
image-src | string | Defines the image source URL. | ||
image-alt | string | Defines the alternative text of the image | 🟩 | |
config | string | Defines the aspect ratio for the image. Possible values are: Also you can insert the value | ||
size | number | Defines the image column size. Possible values are: | ||
copyright | string | Defines the copyright text of the image | ||
caption | string | Defines the caption text of the image | ||
sources | object[] | Defines the sources of the image |
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. Check the size section for more information.
copyright
The copyright parameter is used to add a short copyright text information, if necessary.
You can customize the color of the copyright text using the --z-image--copyright-color CSS custom property.
caption
The caption parameter is used to add a short caption and concise description of the image or topic.
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.
Browser support
Detected engine:
Chromium
Webkit
Gecko