> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovable.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Using images in Lovable
> Upload images to chat, replace them with visual edits, use external URLs, or add files from your GitHub public directory.
To add images you can do one of four things:
Simply upload them in the chat and explain to Lovable’s Agent where and how you’d like them to appear in your project. For example:
> Replace the logo in navbar with this image
You can replace an existing image directly using the [visual editor](https://docs.lovable.dev/features/precision-edit#visual-edits) functionality:
Click on "Edit" tool.
Select the image holder you would like to change.
Change the image.
One way to add images to your project is by referencing an image from an external URL. This method allows you to use images hosted on external platforms like Unsplash, Imgur, or any other image-hosting service. Be mindful of use copyrights!
Here’s how to prompt Lovable to use an external image:
Find the image you want to use.
For example, you can visit a site like Unsplash, select an image, and copy its URL.
In your project prompt, simply tell Lovable to use that image by specifying the URL. For example:
```
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.
```
Another method to add images to your Lovable project is by using images uploaded to the `public` directory of your connected GitHub repository. Here’s how you can do it:
Ensure your project is connected to your GitHub repo. [Here's how to connect your repo](https://docs.lovable.dev/integrations/git-integration).
Inside your GitHub repository, navigate to the `public` directory. This folder is typically used for hosting assets like images that can be referenced in your project.
Click on **Add file** and then from a dropdown, select **Upload files** option. 
The next step is to transfer your image to your repo:
* Drag and drop the image into the public folder, or
* Click on the **"choose your files"** link to browse and select the image file. 
After selecting your image, write a simple commit message (e.g., "Adding image files to be used in the app") and click **"Commit changes"** to save the file to your repo.
Once the file is uploaded, select it and then click on the copy icon next to the file name to copy the image’s path. This path will be used in your Lovable prompt. 
You can now reference this image in your project by using a prompt like the following:
```
Add an additional image to the hero section.
This time, use this one from my local repo: public/c-64-close-up.jpg.jpeg
```
Be sure to use your image name and path you copied in the previous step.
Uploading large images to your GitHub repo can cause it to grow in size, which can affect Lovable performance (longer repo cloning times, slower startup of previews/sandbox).
Try to optimize your images before uploading them to your `public` folder by compressing them and using dimensions that are relevant to your use case. For example, don't use a full HD-sized image if it will only be displayed as a small icon.
To help you better understand how to integrate images using the methods outlined above, we have a project you can explore: [Lovable Project Example](https://lovable.dev/projects/e823fedf-238d-4313-86a8-1fd4bfc2a9ba). In this project, you can see the actual prompts and how each method works in practice.
Additionally, here's a public GitHub repository that includes the commits, uploaded images, and full implementation details. You can view the repository here: [GitHub: Adding Images Example](https://github.com/viborc/adding-images-example).
Feel free to explore the project and repository to deepen your understanding and improve your implementation skills.