Crea un componente immagine personalizzato
Astro fornisce due componenti integrati che puoi utilizzare per visualizzare e ottimizzare le tue immagini. Il componente <Picture>
ti consente di visualizzare immagini responsive e di lavorare con diversi formati e dimensioni. Il componente <Image>
ottimizzerà le tue immagini e ti consentirà di passare diversi formati e proprietà di qualità.
Quando hai bisogno di opzioni che i componenti <Picture>
e <Image>
non supportano attualmente, puoi utilizzare la funzione getImage()
per creare un componente personalizzato.
In questa ricetta, userai la funzione getImage()
per creare il tuo componente immagine personalizzato che visualizza diverse immagini di origine in base alle media query.
Ricetta
Sezione intitolata Ricetta-
Crea un nuovo componente Astro e importa la funzione
getImage()
-
Crea un nuovo componente per la tua immagine personalizzata.
MyCustomComponent.astro
riceverà treprops
daAstro.props
. Le propsmobileImgUrl
edesktopImgUrl
vengono utilizzate per creare la tua immagine a diverse dimensioni del viewport. La propalt
viene utilizzata per il testo alternativo dell’immagine. Queste props verranno passate ovunque tu renda i tuoi componenti immagine personalizzati. Aggiungi le seguenti importazioni e definisci le props che utilizzerai nel tuo componente. Puoi anche utilizzare TypeScript per digitare le props. -
Definisci ciascuna delle tue immagini responsive chiamando la funzione
getImage()
con le proprietà desiderate. -
Crea un elemento
<picture>
che genera unsrcset
con le tue diverse immagini in base alle media query desiderate. -
Importa e usa il componente
<MyCustomImageComponent />
in qualsiasi file.astro
. Assicurati di passare le props necessarie per generare due immagini diverse alle diverse dimensioni del viewport: