[AJUDA} Imagem corrompida NEXTJS

Estou importando a imagem da seguinte forma:

import Img from '@/public/images/_MG_2709.jpg'

e usando no projeto através do componente Image, assim:

   src={Img}
   alt='descrição'
   fill
   quality={90}
   />

e na hora de rodar o código, aparece o erro:

Error: Image import "@/public/images/_MG_2709.jpg" is not a valid image file. The image may be corrupted or an unsupported format.

O erro só aparece quando a importação é desse forma, se eu colocar o caminho no src do componente funciona normalmente.

Alguém consegue me ajudar?

RGMenezes ano passado

Eu acho que é por conta da abreviação de caminho '@/', geralmente ele está associado a pasta src, porém a pasta public não fica dentro da pasta src logo esse caminho não existe.

Verifica se a pasta public está dentro ou não da pasta src.

yagogomes ano passado

Não sei exatamente qual a tratativa que o Next.js faz dentro da pasta public, porém me parece que o problema é a imagem estar dentro desta pasta.

Eu tentaria criar uma pasta assets ou images no root do seu projeto e testar o import da imagem vinda deste novo diretorio, acredito que deve funcionar sem problemas.

renancardoso ano passado

O Codegus do youtube me disse a mesma coisa, eu tentei e também não funcionou. Não sei se é algum erro do Next (muito mais provável que seja meu), ou algo do tipo. Mas to conseguindo resolver o problema usando as propriedade sizes e styles. Salvo pela documentação.

fernandosoares23 ano passado

Você pode usar a pasta **public** e nela colocar os assets, aí você pode acessar colocando o src assim **/imagem.png**