As imagens não estão sendo encontradas, não marca erro no console. Fiz também o absolute import e caso alguém achei meio estranho, é que estou adaptando o module css para o styled-components.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
As imagens não estão sendo encontradas, não marca erro no console. Fiz também o absolute import e caso alguém achei meio estranho, é que estou adaptando o module css para o styled-components.
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!