Skip to main content
Per aggiungere immagini, puoi procedere in uno di questi quattro modi:
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
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.images/visual-edit-replace.png
3

Passaggio 3

Sostituisci l’immagine.images/visual-edit-image.png
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:
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. Selezione dei file da caricare
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. Selezione dei file da caricare
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. Selezione dei file da caricare
7

Usa l'immagine in Lovable

Ora puoi usare questa immagine nel tuo progetto tramite un’istruzione come la seguente:
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.