Data

Image

Componente immagine con supporto per preview modale, zoom e gestione degli eventi di caricamento.

Import

import { Image } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`src`	`string`	—	URL sorgente dell'immagine (obbligatorio)
`alt`	`string`	`''`	Testo alternativo per accessibilita'
`width`	`string \| number`	`undefined`	Larghezza (valore CSS o numero in px)
`height`	`string \| number`	`undefined`	Altezza (valore CSS o numero in px)
`preview`	`boolean`	`false`	Abilita la preview modale con zoom al click
`imageClass`	`string`	`''`	Classe CSS aggiuntiva per il tag `<img>`
`imageStyle`	`Record<string, string \| number>`	`{}`	Stile inline aggiuntivo per il tag `<img>`
`class`	`string`	`''`	Classe CSS aggiuntiva per il container esterno

Emits

Evento	Payload	Descrizione
`show`	—	Emesso quando il preview modale viene aperto
`hide`	—	Emesso quando il preview modale viene chiuso
`load`	`Event`	Emesso quando l'immagine termina di caricarsi
`error`	`Event`	Emesso quando si verifica un errore nel caricamento

Slot

Slot	Scope	Descrizione
`image`	—	Template custom per l'immagine thumbnail (sostituisce il `<img>` di default)
`previewicon`	—	Icona custom sovrapposta all'immagine per indicare la preview
`preview`	`{ style: Record<string, string>, onClick: (event: MouseEvent) => void }`	Template custom per l'immagine nel modale di preview

Esempi

Immagine con Preview Modale

Galleria con Preview

Dimensioni Diverse

Immagine Responsive

Note Comportamento

Quando preview e' true, al passaggio del mouse sull'immagine appare un'icona overlay cliccabile
Il modale di preview e' renderizzato tramite <Teleport to="body"> per evitare problemi di z-index
All'apertura del preview, lo scroll del body viene disabilitato e ripristinato alla chiusura
Se width o height sono numeri, vengono automaticamente convertiti in valori CSS con suffisso px
L'icona di preview e l'icona di chiusura del modale sono configurabili tramite ConfigPlugin

Accessibilita'

L'attributo alt e' fondamentale per l'accessibilita': fornire sempre una descrizione significativa
L'overlay di preview e' attivabile via click
Il modale e' chiudibile cliccando fuori dall'immagine o sul pulsante di chiusura

TypeScript

import type { ImageProps, ImageEmits } from '@pzeta/vue-components'

Galleria

Galleria immagini con strip di thumbnail, navigazione, indicatori, autoplay e supporto fullscreen.

Inplace

Editing inline sul posto — mostra un testo/contenuto cliccabile che, al click, si trasforma in un campo di input o contenuto arbitrario, con pulsante di chiusura opzionale.