Skip to content

Kirby 3.7.5

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
Supported values:
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
Supported values:
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