DocsComponentsImage
Image
The Image component is used to display images, but with some extra features.
Usage
Blurred
You can set the data-blurred-image attribute to true to duplicate the image and blur it to create a blurred effect.
Zooomed
You can make the img a child of the zoomed-wrapper to make the image zoomed when hovered.
Animated Loading
Image component has a built-in skeleton animation to indicate the image is loading and an opacity animation when the image loads.
Slots
- img: Slot for the image element.
- img-wrapper: Image wrapper, it handles alignment, placement, and general appearance.
- zoomed-wrapper: The wrapper slot for the zoomed image it avoids the image content to overflow the parent container.
- blurred-img: The wrapper slot for the duplicated blurred image.
Image Properties
| Property | Type | Description | Default |
|---|---|---|---|
| shadow | none | small | medium | large | The image shadow. | medium |
| radius | none | sm | md | lg | The image border radius. | lg |
| data-blurred-image | "true" | "false" | Whether the image should have a duplicated blurred image at the background. | false |
| data-disable-skeleton | "true" | "false" | Whether the image should disable the skeleton animation while loading. | false |
| data-disable-animation | "true" | "false" | Whether to disable the animation. | false |