Image

Component that render image with many features.

Import

import { MpImage } from '@mekari/pixel3'

Playground

API

MpImage

Props

Events

Slots

Name	Type	Default
id Id of image.	string	-
src Souce of image.	string	-
alt Caption of image.	string	-
layout Layout of image.	intrinsic | fixed | fill | responsive	intrinsic
width Width of the image when rendered.	number	-
height Height of the image when rendered.	number	-
sizes Sizes attribute of images.	string	-
src-placeholder Source placeholder of images.	string	data:image/gif;base64,
srcset Srcset attributes of images to be rendered.	string	-
type-srcset Type attributes of images to be rendered.	string	-
media-srcset Media attributes of image for srcset.	string	-
max-srcset Max set of image for srcset.	number	5
object-fit CSS property use with layout fill.	fill | contain | cover | none | scale-down	fill
object-position CSS property use with layout fill.	string	-
error-text Text show when image failed to load.	string	-
is-lazy If true, images will rendered with lazy load.	boolean	true
is-show-loading If true, show default spinner when loading.	boolean	true

Usage

With Layout

With Various State

Accessibility

• Don't forget to use alt attributes.
• Value of alt should be clear and has context. for ex: alt="A logo of Mekari"