Imagens não aparecem

Olá, Ana Carolina! Tudo bem?

Então, isso tem a ver com a forma que o React processa as imagens!

Diferente da forma tradicional quando usamos o HTML e importamos passando o caminho absoluto da imagem, no React você precisa importar a imagem como um módulo. Isso acontece porque os navegadores não interpretam o código React (Aquilo que o React retorna).

Você pode imaginar que porque tem um arquivo HTML lá tá tudo Ok, esse arquivo já serve como o HTML que o navegador irá ler e entender, mas o React adiciona elementos na interface de forma dinâmica, e o que o React retorna (o que tá dentro do return dos componentes que parece HTML) não é HTML.

Então, existem os bundlers, como o webpack e o Vite. Eles possuem scripts que manipulam o código React e transpilam (interpretam) para algo que o Navegador consiga entender.

Então, quando você coloca no src da tag img dentro do retorno de um componente React, o webpack não vai conseguir processar essa imagem. Você precisa importar ela, como um módulo, e passar essa importação no src={img}.

Assim, quando o webpack for transpilar o código react ele vai lá, vê o caminho dessa importação, pega a imagem que tá nesse caminho e coloca no lugar certinho que a imagem tem que tá, da forma que o navegador entende e pode renderizar corretamente.

Mas

Tu pode ler mais sobre isso na documentação do React!

E se quiser conhecer mais outras formas de importar imagens no seu app React tem esse artigo aqui.

E uma dica: Olhando seu código, vi que você tem uma pasta assets dentro da pasta componentes. Todas essas imagens você terá que importar com o import para que elas apareçam. Se quiser evitar isso, coloque elas na pasta public.

No curso de React: Lidando com arquivos estáticos voce pode ver como fazer isso a partir da aula 04!

Abraços!

Comigo também estava acontecendo, mas por um erro bobo. Importei a pasta "assets/posts" dentro do src, e não no public como deveria.

Obrigada, resolveu!