Utilizzare le immagini in Lovable

Scopri come aggiungere immagini ai tuoi progetti Lovable

Per aggiungere immagini, puoi procedere in uno di questi quattro modi:

Carica l’immagine nella chat delle istruzioni

Caricali semplicemente nella chat e spiega all’Agent di Lovable dove e come vorresti che compaiano nel tuo Progetto. Ad esempio:

Sostituisci il logo nella navbar con questa immagine

Sostituiscilo nell'editor visivo

Puoi sostituire direttamente un’immagine esistente usando la funzionalità di editor visuale:

1. Passaggio 1

   Fai clic sullo strumento “Edit”.

2. Passaggio 2

   Seleziona il contenitore dell’immagine che desideri modificare.

   
3. Passaggio 3

   Sostituisci l’immagine.

   

Usare un URL di un'immagine esterna

Un modo per aggiungere immagini al tuo Progetto è fare riferimento a un’immagine tramite un URL esterno. Questo metodo ti permette di usare immagini ospitate su piattaforme esterne come Unsplash, Imgur o qualsiasi altro servizio di hosting di immagini. Fai attenzione ai diritti d’autore!

Ecco come fornire un’istruzione a Lovable per usare un’immagine esterna:

1. Passaggio 1

   Trova l’immagine che vuoi usare.

   Ad esempio, puoi visitare un sito come Unsplash, selezionare un’immagine e copiarne l’URL.

2. Passaggio 2

   Nella tua istruzione per il Progetto, indica semplicemente a Lovable di usare quell’immagine specificando l’URL. Ad esempio:

   Use the image from this URL 
   https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png 
   for the hero section image.
   

Utilizzare immagini dalla tua directory pubblica su GitHub

Un altro metodo per aggiungere immagini al tuo progetto Lovable è usare le immagini caricate nella directory public del repository GitHub collegato. Ecco come puoi farlo:

1. Collega il tuo repository GitHub

   Assicurati che il tuo progetto sia collegato al tuo repository GitHub. Ecco come collegare il tuo repository.

2. Individua la cartella public

   All’interno del tuo repository GitHub, vai alla directory public. Questa cartella è in genere usata per ospitare risorse come immagini che possono essere richiamate nel tuo progetto.

3. Aggiungi file

   Clicca su Add file e poi, dal menu a discesa, seleziona l’opzione Upload files.

4. Carica un'immagine

   Il passo successivo è trasferire l’immagine nel tuo repository:

   • Trascina e rilascia l’immagine nella cartella public, oppure
   • Clicca sul link “choose your files” per cercare e selezionare il file immagine.
5. Esegui il commit delle modifiche

   Dopo aver selezionato l’immagine, scrivi un semplice messaggio di commit (ad esempio, “Adding image files to be used in the app”) e clicca su “Commit changes” per salvare il file nel tuo repository.

6. Ottieni il percorso dell'immagine

   Una volta caricato il file, selezionalo e poi clicca sull’icona di copia accanto al nome del file per copiare il percorso dell’immagine. Questo percorso verrà usato nella tua istruzione Lovable.

7. Usa l'immagine in Lovable

   Ora puoi usare questa immagine nel tuo progetto tramite un’istruzione come la seguente:

   Add an additional image to the hero section. 
   This time, use this one from my local repo: public/c-64-close-up.jpg.jpeg
   

   Assicurati di usare il nome dell’immagine e il percorso che hai copiato nel passaggio precedente.

   Caricare immagini di grandi dimensioni nel tuo repository GitHub può farlo aumentare di dimensioni, il che può influire sulle prestazioni di Lovable (tempi di clonazione del repository più lunghi, avvio più lento di anteprime/sandbox).

   Cerca di ottimizzare le tue immagini prima di caricarle nella cartella public, comprimendole e usando dimensioni pertinenti al tuo caso d’uso. Ad esempio, non usare un’immagine in formato full HD se verrà visualizzata solo come una piccola icona.

Per aiutarti a capire meglio come integrare le immagini usando i metodi descritti sopra, abbiamo un progetto che puoi esplorare: Lovable Project Example. In questo progetto puoi vedere i prompt effettivi e come ogni metodo funziona in pratica.

Inoltre, ecco un repository GitHub pubblico che include i commit, le immagini caricate e tutti i dettagli di implementazione. Puoi visualizzare il repository qui: GitHub: Adding Images Example.

Sentiti libero di esplorare il progetto e il repository per approfondire la tua comprensione e migliorare le tue abilità di implementazione.