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 | Image alternative text. |
|
|
| crossorigin | Proxies the |
| - |
| decoding | Proxies the |
| - |
| draggable | Proxies the |
|
|
| fallback-icon | Shows an icon if image failed to load or src doesn't specified. |
| - |
| fallback-render | Allows to use render function to render custom contents if image failed to load or src doesn't specified |
| - |
| fallback-src | Shows an alternative image if original image failed to load or src doesn't specified. |
| - |
| fallback-text | Shows an alternative text if image failed to load or src doesn't specified. |
| - |
| fetchpriority | Proxies the |
|
|
| fit | Proxies the |
|
|
| lazy | Enables lazy load for the image. |
|
|
| loading | Proxies the |
| - |
| max-width | Maximal image's width |
|
|
| placeholder-src |
|
|
|
| preset | Named preset combination of component props. |
| - |
| ratio | Image width to height ratio. |
|
|
| referrerpolicy | Proxies the |
| - |
| sizes | Proxies the |
|
|
| src required | Initial image URL. |
| - |
| srcset | Proxies the |
|
|
| title | Proxies the |
|
|
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% |