Utiliser des images dans Lovable

Découvrez comment ajouter des images à vos projets Lovable

Pour ajouter des images, vous pouvez procéder de l’une des quatre manières suivantes :

Importez l’image dans le chat du Prompt

Il vous suffit de les importer dans le chat et d’expliquer à l’agent Lovable où et comment vous souhaitez qu’ils apparaissent dans votre projet. Par exemple :

Remplacez le logo de la barre de navigation par cette image

Remplacez-le dans l’éditeur visuel

Vous pouvez remplacer une image existante directement en utilisant la fonctionnalité de l’éditeur visuel :

1. Étape 1

   Cliquez sur l’outil « Edit ».

2. Étape 2

   Sélectionnez l’emplacement d’image que vous souhaitez modifier.

   
3. Étape 3

   Remplacez l’image.

   

Utiliser une URL d’image externe

Une façon d’ajouter des images à votre projet consiste à référencer une image à partir d’une URL externe. Cette méthode vous permet d’utiliser des images hébergées sur des plateformes externes comme Unsplash, Imgur ou tout autre service d’hébergement d’images. Faites attention aux droits d’auteur !

Voici comment créer un prompt pour que Lovable utilise une image externe :

1. Step 1

   Trouvez l’image que vous souhaitez utiliser.

   Par exemple, vous pouvez visiter un site comme Unsplash, sélectionner une image et copier son URL.

2. Step 2

   Dans le prompt de votre projet, indiquez simplement à Lovable d’utiliser cette image en précisant l’URL. Par exemple :

   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.
   

Utiliser des images depuis votre répertoire GitHub public

Une autre méthode pour ajouter des images à ton projet Lovable consiste à utiliser des images téléversées dans le répertoire public de ton dépôt GitHub connecté. Voici comment procéder :

1. Connecter ton dépôt GitHub

   Assure-toi que ton projet est connecté à ton dépôt GitHub. Voici comment connecter ton dépôt.

2. Localiser le dossier public

   Dans ton dépôt GitHub, navigue jusqu’au répertoire public. Ce dossier est généralement utilisé pour héberger des ressources comme des images qui peuvent être référencées dans ton projet.

3. Ajouter un fichier

   Clique sur Add file, puis dans le menu déroulant, sélectionne l’option Upload files.

4. Téléverser une image

   L’étape suivante consiste à transférer ton image dans ton dépôt :

   • Fais glisser l’image dans le dossier public, ou
   • Clique sur le lien “choose your files” pour parcourir et sélectionner le fichier image.
5. Valider les modifications (commit)

   Après avoir sélectionné ton image, écris un message de commit simple (par exemple, “Adding image files to be used in the app”) et clique sur “Commit changes” pour enregistrer le fichier dans ton dépôt.

6. Récupérer le chemin de l'image

   Une fois le fichier téléversé, sélectionne-le puis clique sur l’icône de copie à côté du nom du fichier pour copier le chemin d’accès de l’image. Ce chemin sera utilisé dans ton Prompt Lovable.

7. Utiliser l'image dans Lovable

   Tu peux maintenant référencer cette image dans ton projet en utilisant un Prompt comme celui-ci :

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

   Assure-toi d’utiliser le nom de ton image et le chemin que tu as copiés à l’étape précédente.

   Le téléversement d’images volumineuses dans ton dépôt GitHub peut augmenter sa taille, ce qui peut affecter les performances de Lovable (temps de clonage du dépôt plus longs, démarrage plus lent des aperçus/sandbox).

   Essaie d’optimiser tes images avant de les téléverser dans ton dossier public en les compressant et en utilisant des dimensions adaptées à ton cas d’usage. Par exemple, n’utilise pas une image en pleine résolution HD si elle ne doit être affichée qu’en petite icône.

Pour t’aider à mieux comprendre comment intégrer des images en utilisant les méthodes décrites ci-dessus, nous avons un projet que tu peux explorer : Exemple de projet Lovable. Dans ce projet, tu peux voir les invites réelles et le fonctionnement concret de chaque méthode.

De plus, voici un dépôt GitHub public qui inclut les commits, les images téléversées et tous les détails d’implémentation. Tu peux consulter le dépôt ici : GitHub: Adding Images Example.

N’hésite pas à explorer le projet et le dépôt pour approfondir ta compréhension et améliorer tes compétences d’implémentation.