Image #
The va-image
component is used to display responsive images. It has some features to make your work with images easier.
Examples #
Default #
Ratio #
The ratio
prop changes image original ratio, showing part of image to fit new ratio.
Object Fit #
Proxies object-fit
CSS property. Available values are: contain
, fill
, cover
, scale-down
, none
.
Status slots #
We're providing 3 status slots: error
(visible when src
path is incorrect), loading
(visible when image is loading) and placeholder
(works as both previous). As an alternative for error handling, we provide the fallback-icon
, fallback-text
, fallback-image
and fallback-renderer
props, that will be called if error slot wasn't passed. Also you're able to set global fallback settings via components config.
Srcset #
The srcset
and sizes
properties allows you to use native srcset attribute with our component.
Lazy Load #
The lazy
prop allows you to use lazy-load behavior. In this case the image will be loaded only when it becomes visible (intersection).
How to deal with images in Vite based apps #
When you will work with va-image
component, you possibly can meet an issue with missing images in Vite based applications.
To resolve this issue, you need to import your image into the script tag and use imported image as a source for the va-image
component.
<template>
<va-image :src="image" />
</template>
<script setup>
import image from '~/assets/path/to/image.jpg'
</script>
Also, you can place your images under your public
directory to avoid importing images.
<template>
<va-image src="path/to/image.jpg" />
</template>
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
alt |
|
| |
contain |
|
| |
crossorigin |
| - | |
decoding |
| - | |
draggable |
|
| |
fallbackIcon |
| - | |
fallbackRender |
| - | |
fallbackSrc |
| - | |
fallbackText |
| - | |
fetchpriority |
|
| |
fit |
|
| |
lazy |
|
| |
loading |
| - | |
maxWidth |
|
| |
placeholderSrc |
|
| |
preset |
| - | |
ratio |
|
| |
referrerpolicy |
| - | |
sizes |
|
| |
src required |
| - | |
srcset |
|
| |
title |
|
|
Events #
Name | Description |
---|---|
error | Emitted on loading error.. The event argument is:
|
fallback | |
loaded | Emitted when image loading is finished.. The event argument is:
|
Slots #
Name | Description |
---|---|
default | Image overlay content. Won't be shown on loading or error. |
error | Shown if loading returns an error. |
loading | Shown when image is loading. |
placeholder | Shown in case of loading/error and if no specific for these states slots were passed. |
sources | Slot for passing one or more |
Css Variables #
Name | Default Value |
---|---|
--va-image-content-position | absolute |
--va-image-content-img-object-position | 50% 50% |