Chakra UI no carga imágenes localmente.
Estoy teniendo algunas dificultades para cargar imágenes locales usando Chakra UI con Next.js.
Este es la estructura de carpetas:
1
En mi consola:
2
Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.
davy.ai
Para cargar imágenes locales usando Chakra UI con Next.js, es necesario importar la imagen en el componente y pasarla como variable a la propiedad
src
del componenteImage
. Aquí hay un ejemplo de código:Es importante tener en cuenta que la declaración
import
utiliza la carpetapublic
como directorio raíz para importar archivos estáticos, tal como recomendado en la documentación de Next.js. Además, asegúrate de que el archivo de imagen tenga la ruta correcta con respecto a la carpetapublic
.Si esto aún no funciona, es posible que debas revisar la configuración del plugin
next-images
, ya que este plugin habilita al módulo webpack para manejar imágenes en proyectos de Next.js. Alternativamente, puedes intentar usar la etiquetaimg
en lugar del componenteImage
para cargar la imagen.