Image

<k-image>

kirby/panel/src/components/Misc/Image.vue

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