Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Boas praticas na utilização de imagens?

Na aula 03 - Rotas aninhadas / Desenvolvendo sobre Mim
o professor ao inves de fazer um <img src="http://path-da-imagem/imagem.png">
ele faz um

import fotoSobreMim from "assets/sobre_mim_foto.png"
            <img 
                src={fotoSobreMim}
                alt="Foto sorrindo"
                className={styles.fotoSobreMim}></img>

Gostaria de saber se no react, inserir imagens atraves de um import é uma pratica comum ou foi feito dessa maneira apenas para fins didaticos?

Tenho essa duvida pois no caso de uma pagina com 10 imagens, eu teria que fazer 10 imports diferentes, estaria certo?

2 respostas
solução!

Oi, Alexandre, tudo bem?

No React, importar imagens é uma prática muito comum e recomendada.

Isso acontece porque ferramentas de build (como Webpack e Vite) otimizam essas imagens, garantindo que o caminho para elas funcione corretamente na versão final do site e evitando links quebrados.

Para recursos fixos (logos, ícones, fotos de perfil), utilize import. Para conteúdo dinâmico (fotos de galeria, produtos), coloque-os na pasta public e acesse-os pelo caminho direto (ex: /imagens/foto1.png), evitando múltiplos imports.

No caso da aula, como a foto é um recurso fixo do componente SobreMim, o professor usou a abordagem correta e mais segura.

Espero ter ajudado! Bons estudos!

Sucesso

Imagem da comunidade

Ajudou sim, muito obrigado