[Ajuda] Imagens com nextjs não aparecem em site
Estou com dificuldades. Fiz meu site pessoal em nextjs, build e deploy ocorrendo tudo certo, mas as images não aparecem na pagina, os links (que estão direcionados a outras partes do site) também não funcionam.
Eu entendo que não dei informações relevantes, mas alguém já passou por isso e soube como resolver?
Você deve inserir as imagens dentro da pasta public do seu projeto.
Supondo que você já fez isso, deve chamá-las da seguinte forma:
import Image from "next/image";
<Image src="/minha-imagem.jpg" alt="minha imagem" width={32} height={32} />
ou, se tiver estiver dentro de uma subpasta:
<Image src="/imagens/minha-imagem.jpg" alt="minha imagem" width={32} height={32} />
`
`
Esse é um dos codigos onde estou colocando a imagem, porém ainda sem sucesso... Não alterar tudo, somente essa parte, e continua a mesma...
Você checou se a imagem está carregando normalmente pelo console na aba network? Se estiver sem erros, creio que seu estilo está fazendo ela sumir.
Mano, pensei em algumas coisas, talvez possa te ajudar:
Para as imagens:
- Tenta debugar pelo networking, vê se ele ta conseguindo baixar as imagens, caso não, vê qual o status code e tenta entender o porque ta rolando isso.
- Verifica se o domínio da imagem foi configurado corretamente no next.config.js, talvez ao buildar a aplicação o path da imagem esteja mudando.
- Onde fez o deploy? Ele não retorna nenhum warning ou TypeError no log do build?
- Prioriza o uso do componente Image do next/image.
- Vê se as imagens estão no caminho correto. Se estiver usando um caminho relativo, talvez precise ajustar para um caminho absoluto ou relativo corretamente. Lembre-se de que os caminhos podem mudar após o build. =)
Para os links:
- Se estiver usando um basePath no next.config.js, certifique-se de que todos os caminhos das imagens e links estão corretos.
- Prioriza o uso do componente Link do next.
São dicas gerais que eu usaria pra tentar debugar essa parada. Qualquer coisa só chamar ai, mano!