React - Versão 19.2

7 - Imagens

Nesta aula, vamos aprender a trabalhar com imagens em projetos React. Existem diferentes formas de adicionar imagens, e você pode escolher a que melhor se encaixa no seu projeto.

Abaixo compartilho a imagem utiliza no treinamento:

1. Importando a imagem como módulo (modo recomendado)

Essa é a forma mais comum e recomendada, especialmente para imagens que estão dentro da pasta do projeto:

// Importar imagem
import react from "../imagens/react.png";

// Componente
function Imagem() {
  return (<src={react} alt="Logo do React" />);
}

// Exportar
export default Imagem;

✅ Vantagens:

• O React gerencia o caminho da imagem automaticamente
• Facilita refatoração de pastas e arquivos
• Compatível com bundlers modernos (Vite e Webpack)

---

2. Utilizando imagens na pasta public

O React também permite colocar imagens na pasta public e acessá-las diretamente pelo caminho relativo à raiz:

// Supondo que você tenha: public/react.png

function ImagemPublic() {
  return (<img src="/react.png" alt="Logo do React" />);
}

export default ImagemPublic;

✅ Vantagens:

• Útil para arquivos que não precisam passar pelo processo de build
• O caminho da imagem não muda mesmo após o build

⚠️ Observação:

• Não é necessário importar imagens do public
• Não suporta refatoração automática do caminho pelo bundler

---

3. Usando imagens externas (URL)

Também podemos utilizar imagens hospedadas em outro servidor ou na web:

function ImagemExterna() {
  return (
    <img src="https://reactjs.org/logo-og.png" alt="Logo do React externo" />
  );
}

export default ImagemExterna;

✅ Vantagens:

• Não precisa armazenar a imagem no projeto.
• Útil para recursos compartilhados ou CDN.

⚠️ Observação:

• Depende da disponibilidade do servidor externo.
• O carregamento pode ser mais lento se a conexão estiver ruim.

---

Dicas importantes

• Sempre utilize o atributo alt nas imagens para acessibilidade.
• Se for utilizar CSS, você pode adicionar classes com className para estilizar imagens.
• Para imagens responsivas, combine CSS com width: 100% ou max-width.

Agora você está pronto para usar imagens de qualquer forma em seus projetos React.

Acompanhe nossa aula no YouTube e veja exemplos práticos utilizando cada método: