Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Imagens não estão aparecendo

Referente ao curso React: desenvolvendo em React Router com JavaScript, no capítulo Rotas aninhadas e atividade Desenvolvendo Inicio

por Regina Hisae Nakagima Gonçalves
| 97.7k xp | 51 posts
PSA

Eu não sei pq minhas imagens não estão aparecendo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O código index.js do Post:

import styles from "./Post.module.css";

export default function Post(post) {
  return (
    <div className={styles.post}>
      <img
        className={styles.capa}
        src={`/assets/posts/${post.id}/capa.png `}
        alt="Imagem de capa do post"
      />
    </div>
  );
}

Código do index.js de Inicio:

import Banner from "componentes/Banner";
import styles from "./Inicio.module.css";

import posts from "json/posts.json";
import Post from "componentes/Post";

export default function Inicio() {
  return (
    <main>
      <Banner />

      <ul className={styles.posts}>
        {posts.map((post) => (
          <li key={post.id}>
            <Post post={post} />
          </li>
        ))}
      </ul>
    </main>
  );
}
2 respostas
por Renan Lima
| 3632.1k xp | 7654 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Regina!

Pela descrição do problema e o código fornecido, parece que há um pequeno erro no caminho da imagem que você está tentando carregar no componente Post. No atributo src da tag img, há um espaço extra no final da string do caminho da imagem. Isso pode fazer com que o navegador não encontre o arquivo correto, pois o caminho fica incorreto devido ao espaço adicional.

No trecho do seu componente Post, você tem:

<img
  className={styles.capa}
  src={`/assets/posts/${post.id}/capa.png `}
  alt="Imagem de capa do post"
/>

Para corrigir, você deve remover o espaço extra após .png no src da imagem. O código corrigido ficaria assim:

<img
  className={styles.capa}
  src={`/assets/posts/${post.id}/capa.png`}
  alt="Imagem de capa do post"
/>

Além disso, certifique-se de que as imagens realmente existam no caminho especificado e que o servidor de desenvolvimento esteja servindo corretamente os arquivos estáticos da pasta public.

Espero que essa correção resolva o problema com as imagens não aparecendo no seu projeto React. Experimente fazer essa alteração e veja se as imagens começam a ser exibidas corretamente. Espero ter ajudado e bons estudos!

solução!
por Regina Hisae Nakagima Gonçalves
| 97.7k xp | 51 posts
PSA

Encontrei a solução para o problema:

import styles from "./Post.module.css";

export default function Post({ post }) {
  return (
    <div className={styles.post}>
      <img
        className={styles.capa}
        src={`/assets/posts/${post.id}/capa.png`}
        alt="Imagem de capa do post"
      />

      <h2 className={styles.titulo}>{post.titulo}</h2>

      <button className={styles.botaoLer}>Ler</button>
    </div>
  );
}

Eu coloquei chaves

Insira aqui a descrição dessa imagem para ajudar na acessibilidade