1
resposta

Erro ao carreegar o src da imagem

estou tomando o erro

Error: Image with src "https://raw.githubusercontent.com/viniciosneves/code-connect-assets/main/posts/introducao-ao-react.png" is missing required "width" property.

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

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
1 resposta

Olá Carlos.
Vou lhe dar algumas alternativas que podem ajudar neste caso.
Esse erro acontece porque o componente Image do Next.js exige que você defina as propriedades width e height, ou use fill para o layout responsivo.
Você tem duas opções para corrigir:
Opção 1 — Definir width e height fixos:
No seu componente CardPost, altere o código assim:

<Image 
  src={post.cover} 
  alt="teste" 
  width={800} 
  height={400}
/>

Você pode ajustar os valores de width e height conforme o tamanho desejado.
Opção 2 — Usar layout responsivo com fill:
Se quiser que a imagem se ajuste ao container, use fill e defina o container com position: relative e altura:

<figure style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image 
    src={post.cover} 
    alt="teste" 
    fill 
    style={{ objectFit: 'cover' }}
  />
</figure>

Explicação:
O Next.js precisa dessas informações para otimizar e servir a imagem corretamente.
Sem width e height (ou fill), ele não consegue calcular o layout antecipadamente, resultando no erro mostrado.
Confere ai se dá certo e envie um feedback com o resultado.
Bons estudos.