1

Estoy creando una pequeña app con Next.js, y no me están leyendo los archivos binarios (según el error), o sea me da error al usar <img /> o el nuevo componente de Next Image from 'next/image'

Así está el código:

import React from 'react'
import Image from 'next/image'

import { DecorationPoint, HeaderTag } from './style'

import LogoRestaurant from '../../public/images/logo-restaurant.png'

export const Header = () => {

   return(
      <HeaderTag>
         <DecorationPoint />
         <div>
            <h1>
               <Image src='/images/logo-restaurant.png' alt='Logo'/>
            </h1>
         </div>
      </HeaderTag>
   )
}

Y me da este error:

error - ./public/images/logo-restaurant.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Hasta donde tengo entendido no se necesita configurar eso en Next.

2 respuestas 2

1

Yo creo el error te lo da por haber agregado:

import LogoRestaurant from '../../public/images/logo-restaurant.png'

Nunca he trabajado con next.js, pero revisando la documentación, no deberías importar las imágenes, como lo estás tratando de hacer en esa línea, sino tener las imágenes en tu carpeta public y cargarlas tal cual ya lo estás haciendo:

import Image from 'next/image'
//...luego más abajo
<Image src='/images/logo-restaurant.png' alt='Logo'/>
0

Esta exportando Image pero no lo estas utilizando

Manda a llamar así

<Image src='/images/logo-restaurant.png 
alt='logo' >
</Image>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.