Entrar Ainda não tem acesso?
1
resposta

Configurações Image

Referente ao curso Next.js: conheça o framework React

por Alexandre Oliveira De Souza
| 6.7k xp | 4 posts
Software Engineer

Boa tarde, estou com problemas e acredito que seja na configuracao de Image,

Parei na aula 03 Configurando imagens externas e meu app nao renderiza, esta dando a seguinte mensagem:

Unhandled Runtime Error Error: Invalid src prop (https://raw.githubusercontent.com/viniciosneves/code-connect-assets/main/posts/introducao-ao-react.png) on next/image, hostname "raw.githubusercontent.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Meu next.config esta da seguinte forma:

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'raw.githubusercontent.com',
          port: '',
          pathname: '/**',
        },
      ],
    },
  };
  
  module.exports = nextConfig;
1 resposta
por Renan Lima
| 3634.9k xp | 7663 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Alexandre.

Tudo bem?

Esse erro geralmente ocorre aundo o pathname está errado, porém analisando o seu código está correto, eu até testei ele com o projeto da aula, e funcionou certinho.

  • O que você pode tentar é passar o caminho específico do pathname, o código do arquivo next.config.js fica assim:
/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'raw.githubusercontent.com',
          port: '',
          pathname: '/viniciosneves/code-connect-assets/**',     //Mudança aqui
        },
      ],
    },
  };
  
  module.exports = nextConfig;

Se isso não resolver de primeira, você pode tentar:

  • Tenta limpar o cache do Next.js excluindo a pasta ".next", em seguida execute o comando:
rm -rf .next
npm run dev
  • Talvez até rodar o npm install novamente para garantir as dependências pode ajudar

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.