Vitral 0.2
Media

Image

An image that can open in a viewer over the page, with rotate and zoom.

WAI-ARIA tested

Import

main.ts
import { Image } from '@vitral/vue';

Basic

A lake between pine-covered hills
<script setup lang="ts">import { Image } from '@vitral/vue';</script> <template>    <Image src="https://picsum.photos/id/1043/320/200" alt="A lake between pine-covered hills" width="320" /></template>

Preview

<script setup lang="ts">import { Image } from '@vitral/vue';</script> <template>    <Image src="https://picsum.photos/id/1036/320/200" preview-src="https://picsum.photos/id/1036/1280/800" alt="Snowy mountains at dusk" width="320" preview /></template>

API

Read from packages/vue/src/components/Image/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
srcstring—
altstringThe image's text alternative. It also names the preview.
widthstring | number—
heightstring | number—
previewbooleanOpen a viewer with zoom and rotation when the image is pressed.
previewSrcstringA larger image for the viewer. Defaults to `src`.
zoomStepnumberHow much each zoom step changes the scale. Defaults to 0.25.
minZoomnumberDefaults to 0.5.
maxZoomnumberDefaults to 3.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
show——
hide——
errorevent: Event—

Slots

NameSlot propsDescription
image(props: { errorCallback: (event: Event) => void })Replaces the image, e.g. with a <picture>.
preview(props: { style: Record<string, string>; previewCallback: () => void })Replaces the image in the viewer.
indicator—Replaces the hover indicator.