Executando verificação de segurança...
1
mayconviniciusdev
1 min de leitura ·

[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?

Carregando publicação patrocinada...
1
estevanulian

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} />
1
mayconviniciusdev
Autor
Autor

`

 <Slider settings={settings}>
    <SwiperSlide>
      <div 
      style={{position: 'relative', width: '100%', height: '630px'}}>
        <Image
        src='/banner.png'
        alt="Banner"
        quality={100}
        layout="fill"
        objectFit="cover"/>
        
        <div 
        style={{position: 'absolute', width: '150px', height: '150px',
        top: '50%', left: '50%', transform: 'translate(-50%, -50%)'}}>
          <Image
          src='/logo.png'
          alt="Logo"
          quality={100}
          layout="fill"
          objectFit="contain"/>
        </div>
      </div>
    </SwiperSlide>

`

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...

1
1
gabrielduete

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!