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 | img source |
Parameters use โ
Image โ
image-src
โ
The image-src
parameter is used to define the image URL to be displayed.
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 copiright 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 default
slot ands still maintain the config:
Attention!
This approach has limitations. Test it in your setup.
Browser support โ
Detected engine: ย
Chromium
Webkit
Gecko