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

# Usando imagens no Lovable

> Aprenda a adicionar imagens aos seus projetos no Lovable

Para adicionar imagens, você pode fazer uma destas quatro coisas:

<AccordionGroup>
  <Accordion title="Envie a imagem para o chat do Prompt de IA">
    Basta enviá-los no chat e explicar ao Agent da Lovable onde e como você quer que eles apareçam no seu projeto. Por exemplo:

    > Substitua o logotipo na navbar por esta imagem
  </Accordion>

  <Accordion title="Substitua no editor visual">
    Você pode substituir uma imagem existente diretamente usando a funcionalidade do [editor visual](https://docs.lovable.dev/features/precision-edit#visual-edits):

    <Steps>
      <Step title="Etapa 1">
        Clique na ferramenta "Edit".
      </Step>

      <Step title="Etapa 2">
        Selecione o elemento de imagem que você quer alterar.

        <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="Etapa 3">
        Altere a imagem.

        <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="Usando uma URL de imagem externa">
    Uma maneira de adicionar imagens ao seu Projeto é referenciando uma imagem a partir de uma URL externa. Esse método permite usar imagens hospedadas em plataformas como Unsplash, Imgur ou qualquer outro serviço de hospedagem de imagens. Fique atento aos direitos autorais!

    Veja como criar um Prompt de IA para o Lovable usar uma imagem externa:

    <Steps>
      <Step title="Passo 1">
        Encontre a imagem que você quer usar.

        Por exemplo, você pode acessar um site como o Unsplash, selecionar uma imagem e copiar a URL dela.
      </Step>

      <Step title="Passo 2">
        No Prompt de IA do seu Projeto, simplesmente peça para o Lovable usar essa imagem, informando a URL. Por exemplo:

        ```
        Use a imagem deste URL
        https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Pale_Blue_Dot.png/442px-Pale_Blue_Dot.png
        como a imagem da hero section.
        ```
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Usar imagens do diretório público do seu repositório no GitHub">
    Outra forma de adicionar imagens ao seu Projeto Lovable é usando imagens enviadas para o diretório `public` do seu repositório GitHub conectado. Veja como fazer:

    <Steps>
      <Step title="Conecte seu repositório GitHub">
        Certifique-se de que seu projeto está conectado ao seu repositório GitHub. [Veja como conectar seu repositório](https://docs.lovable.dev/integrations/git-integration).
      </Step>

      <Step title="Localize a pasta public">
        Dentro do seu repositório GitHub, navegue até o diretório `public`. Essa pasta é normalmente usada para hospedar recursos (assets), como imagens, que podem ser referenciados no seu projeto.
      </Step>

      <Step title="Adicionar arquivo">
        Clique em **Add file** e, no menu suspenso, selecione a opção **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="Selecionando arquivos para upload" width="1339" height="453" data-path="assets/using-images-github-upload.png" />
      </Step>

      <Step title="Fazer upload de uma imagem">
        A próxima etapa é enviar sua imagem para o repositório:

        * Arraste e solte a imagem na pasta `public`, ou
        * Clique no link **"choose your files"** para procurar e selecionar o arquivo de imagem. <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="Selecionando arquivos para upload" width="1339" height="826" data-path="assets/using-images-github-commiting.png" />
      </Step>

      <Step title="Fazer commit das alterações">
        Depois de selecionar sua imagem, escreva uma mensagem de commit simples (por exemplo, "Adding image files to be used in the app") e clique em **"Commit changes"** para salvar o arquivo no seu repositório.
      </Step>

      <Step title="Obter o caminho da imagem">
        Quando o arquivo for enviado, selecione-o e clique no ícone de cópia ao lado do nome do arquivo para copiar o caminho da imagem. Esse caminho será usado no seu Prompt de IA do 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="Selecionando arquivos para upload" width="1339" height="825" data-path="assets/using-images-github-selecting.png" />
      </Step>

      <Step title="Usar a imagem no Lovable">
        Agora você pode referenciar essa imagem no seu projeto usando um Prompt de IA como o seguinte:

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

        Certifique-se de usar o nome da sua imagem e o caminho que você copiou na etapa anterior.

        <Warning>
          Fazer upload de imagens muito grandes para o seu repositório GitHub pode fazer com que ele aumente de tamanho, o que pode afetar o desempenho do Lovable (tempos maiores de clonagem do repositório, inicialização mais lenta de pré-visualizações/sandbox).

          Tente otimizar suas imagens antes de enviá-las para a pasta `public`, comprimindo-as e usando dimensões relevantes para o seu caso de uso. Por exemplo, não use uma imagem em tamanho Full HD se ela for exibida apenas como um pequeno ícone.
        </Warning>
      </Step>
    </Steps>

    Para ajudar você a entender melhor como integrar imagens usando os métodos descritos acima, temos um projeto que você pode explorar: [Exemplo de Projeto Lovable](https://lovable.dev/projects/e823fedf-238d-4313-86a8-1fd4bfc2a9ba). Nesse projeto, você pode ver os Prompts de IA reais e como cada método funciona na prática.

    Além disso, aqui está um repositório GitHub público que inclui os commits, as imagens enviadas e todos os detalhes da implementação. Você pode visualizar o repositório aqui: [GitHub: Adding Images Example](https://github.com/viborc/adding-images-example).

    Sinta-se à vontade para explorar o projeto e o repositório para aprofundar seu entendimento e aprimorar suas habilidades de implementação.
  </Accordion>
</AccordionGroup>