Image
<k-image>
The k-image component simplifies loading and sizing of images and their backgrounds. It can be used as a replacement for regular <img> tags, but has a bunch of additional options and built-in lazy-loading.
<k-image src="myimage.jpg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| alt |
string |
– |
Just like in regular
<img> tags, you can and should define a proper alt attribute whenever possible. The component will add an empty alt tag when no alt text is specified to be skipped by screen readers. Otherwise the filename would be read. |
| back |
string black, white, pattern |
– |
By default the background of images will be transparent
|
| cover |
boolean |
– |
If images don't fit the defined ratio, the component will add additional space around images. You can change that behavior with the
cover attribute. If true, the image will be cropped to fit the ratio. |
| ratio |
string e.g. 1/1, 16/9 or 4/5
|
– |
The container can be set to a fixed ratio. The ratio can be defined freely with the format
widthFraction/heightFraction. The ratio will be calculated automatically. |
| sizes |
string |
– |
For responsive images, pass the
sizes attribute |
| src |
string |
– |
The path/URL to the image file
|
| srcset |
string |
– |
For responsive images, pass the
srcset attribute |
Events
| Event | Description | Passes |
|---|---|---|
| error |
Issue occurred when loading the image
|
– |
| load |
Image was loaded
|
– |
You can bind any native event to the image. Additionally the image component will fire a load or error event, once the image has been loaded or failed to load.
<k-image
ratio="1/1"
src="myimage.jpg"
:crop="true"
@load="yayLoaded"
@error="ohNo"
@click="clicked"
/>CSS classes
.k-image