Image
#

The va-image component is used to display responsive images. It has some features to make your work with images easier.

Examples
#

Default
#

Open in GitHub

Ratio
#

The ratio prop changes image original ratio, showing part of image to fit new ratio.

Open in GitHub

Object Fit
#

Proxies object-fit CSS property. Available values are: contain, fill, cover, scale-down, none.

Open in GitHub

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.

Open in GitHub

Srcset
#

The srcset and sizes properties allows you to use native srcset attribute with our component.

Open in GitHub

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).

Open in GitHub

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 #

NameDescriptionTypesDefault
alt

String

""

contain

Boolean

false

crossorigin

String

-

decoding

String

-

draggable

Boolean

true

fallbackIcon

String

-

fallbackRender

Function

-

fallbackSrc

String

-

fallbackText

String

-

fetchpriority

String

"auto"

fit

String

"cover"

lazy

Boolean

false

loading

String

-

maxWidth

Number

0

placeholderSrc

String

""

preset

String

-

ratio

Number | String

"auto"

referrerpolicy

String

-

sizes

String

""

src

String

-

srcset

String

""

title

String

""

Events #

NameDescription

error

Emitted on loading error.. The event argument is:

Boolean

fallback

loaded

Emitted when image loading is finished.. The event argument is:

Boolean

Slots #

NameDescription

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 source tags MDN.

Css Variables #

NameDefault Value
--va-image-content-position absolute
--va-image-content-img-object-position 50% 50%