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% |