> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 :

<AccordionGroup>
  <Accordion title="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
  </Accordion>

  <Accordion title="Remplacez-le dans l’éditeur visuel">
    Vous pouvez remplacer une image existante directement en utilisant la fonctionnalité de [l’éditeur visuel](https://docs.lovable.dev/features/precision-edit#visual-edits) :

    <Steps>
      <Step title="Étape 1">
        Cliquez sur l’outil « Edit ».
      </Step>

      <Step title="Étape 2">
        Sélectionnez l’emplacement d’image que vous souhaitez modifier.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/visual-edit-replace.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=aa8f6fe31e7619c12038505ccf4c7e69" alt="images/visual-edit-replace.png" width="1378" height="1190" data-path="images/visual-edit-replace.png" />
      </Step>

      <Step title="Étape 3">
        Remplacez l’image.

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/jw-DadLCPO99GETa/images/visual-edit-image.png?fit=max&auto=format&n=jw-DadLCPO99GETa&q=85&s=cbd84644e32fe6fe46a88eb6f627085e" alt="images/visual-edit-image.png" width="412" height="392" data-path="images/visual-edit-image.png" />
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="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 :

    <Steps>
      <Step title="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.
      </Step>

      <Step title="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.
        ```
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="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 :

    <Steps>
      <Step title="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](https://docs.lovable.dev/integrations/git-integration).
      </Step>

      <Step title="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.
      </Step>

      <Step title="Ajouter un fichier">
        Clique sur **Add file**, puis dans le menu déroulant, sélectionne l'option **Upload files**. <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/assets/using-images-github-upload.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=c1d9baf9f1a32e6f1556fcc69937914c" alt="Sélection des fichiers à téléverser" width="1339" height="453" data-path="assets/using-images-github-upload.png" />
      </Step>

      <Step title="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. <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/assets/using-images-github-commiting.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=c5c6b3b368465bf5a65cffe5c84314c3" alt="Sélection des fichiers à téléverser" width="1339" height="826" data-path="assets/using-images-github-commiting.png" />
      </Step>

      <Step title="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.
      </Step>

      <Step title="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. <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/assets/using-images-github-selecting.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=51784204409050b605a43e63008b9605" alt="Sélection des fichiers à téléverser" width="1339" height="825" data-path="assets/using-images-github-selecting.png" />
      </Step>

      <Step title="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.

        <Warning>
          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.
        </Warning>
      </Step>
    </Steps>

    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](https://lovable.dev/projects/e823fedf-238d-4313-86a8-1fd4bfc2a9ba). 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](https://github.com/viborc/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.
  </Accordion>
</AccordionGroup>