We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

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

Image alternative text.

String

""

crossorigin

Proxies the crossorigin attribute to the image MDN.

String

-

decoding

Proxies the decoding attribute to the image MDN.

String

-

draggable

Proxies the draggable attribute to the image MDN.

Boolean

true

fallbackIcon

Shows an icon if image failed to load or src doesn't specified.

String

-

fallbackRender

Allows to use render function to render custom contents if image failed to load or src doesn't specified

Function

-

fallbackSrc

Shows an alternative image if original image failed to load or src doesn't specified.

String

-

fallbackText

Shows an alternative text if image failed to load or src doesn't specified.

String

-

fetchpriority

Proxies the fetchpriority attribute to the image MDN.

String

"auto"

fit

Proxies the object-fit attribute to the image MDN.

String

"cover"

lazy

Enables lazy load for the image.

Boolean

false

loading

Proxies the loading attribute to the image MDN.

String

-

maxWidth

Maximal image's width

Number | String

0

placeholderSrc

src value for the placeholder image (can be replaced with placeholder slot).

String

""

preset

Named preset combination of component props.

String | Array

-

ratio

Image width to height ratio.

Number | String

"auto"

referrerpolicy

Proxies the referrerpolicy attribute to the image MDN.

String

-

sizes

Proxies the sizes attribute to the image MDN.

String

""

src

Initial image URL.

String

-

srcset

Proxies the srcset attribute to the image MDN.

String

""

title

Proxies the title attribute to the image MDN.

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%