Vitral 0.2
Mídia

Image

Uma imagem que pode abrir num visualizador sobre a página, com giro e zoom.

Testado com WAI-ARIA

Importação

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

Básico

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>

Visualização

<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

Lido de packages/vue/src/components/Image/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
srcstring—
altstringO texto alternativo da imagem. Também dá nome à prévia.
widthstring | number—
heightstring | number—
previewbooleanAbre um visualizador com zoom e rotação quando a imagem é pressionada.
previewSrcstringUma imagem maior para o visualizador. O padrão é `src`.
zoomStepnumberQuanto cada passo de zoom muda a escala. O padrão é 0.25.
minZoomnumberO padrão é 0.5.
maxZoomnumberO padrão é 3.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
show——
hide——
errorevent: Event—

Slots

NomeProps do slotDescrição
image(props: { errorCallback: (event: Event) => void })Substitui a imagem, por exemplo por um <picture>.
preview(props: { style: Record<string, string>; previewCallback: () => void })Substitui a imagem no visualizador.
indicator—Substitui o indicador de hover.