Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

655
Vistas
¿Cómo importar una imagen usando nextjs?

Creé una matriz de objetos usando in y quiero importar una imagen almacenada en la carpeta de mi computadora portátil a mi proyecto. Este es un proyecto next.js en el que estoy trabajando. ¿Cómo importo correctamente una imagen en la carpeta de mi computadora portátil en next.js? La imagen está en la carpeta src, no en mi carpeta pública. Gracias por tu tiempo

 const data = { products: [ { _id: '1', name: 'Nike Slim Shirt', category: 'Shirts', image: '/../img/shoes/men/luis/2', price: 120, brand: 'Nike', rating: 4.5, size: 10, description: 'high quality product', }, { _id: '2', name: 'Adidas Fit Shirt', category: 'Shirts', image: '/../img/shoes/men/luis/2', price: 100, brand: 'Adidas', rating: 4.0, size: 10, description: 'high quality product', }, { _id: '3', name: 'Lacoste Free Shirt', category: 'Shirts', image: '/../img/shoes/men/luis/2', price: 220, brand: 'Lacoste', rating: 4.8, size: 17, description: 'high quality product', }, { _id: '4', name: 'Nike Slim Pant', category: 'Pants', image: '/../img/shoes/men/luis/2', price: 78, brand: 'Nike', rating: 4.5, size: 14, description: 'high quality product', }, { _id: '5', name: 'Puma Slim Pant', category: 'Pants', image: '/../img/shoes/men/luis/2', price: 65, brand: 'Puma', rating: 4.5, size: 10, description: 'high quality product', }, { _id: '6', name: 'Adidas Fit Pant', category: 'Pants', image: '/../img/shoes/men/luis/2', price: 139, brand: 'Adidas', rating: 4.5, size: 15, description: 'high quality product', }, ], }; export default data;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Un par de cosas a anotar:

  • Next usa Webpack para construir su aplicación del lado del servidor. Las rutas de URL deben importarse como módulos ES para que cuando Webpack modifique sus archivos, las nuevas URL puedan insertarse correctamente en su aplicación.
  • Si está sirviendo archivos estáticos , deben estar ubicados en la carpeta /public en la raíz de su aplicación.

Ejemplo de código modificado:

 import LuisImg from '/public/shoes/men/luis/2' const data = { products: [ { _id: '1', name: 'Nike Slim Shirt', category: 'Shirts', image: LuisImg, price: 120, brand: 'Nike', rating: 4.5, size: 10, description: 'high quality product', }, { _id: '2', name: 'Adidas Fit Shirt', category: 'Shirts', image: LuisImg, price: 100, brand: 'Adidas', rating: 4.0, size: 10, description: 'high quality product', }, { _id: '3', name: 'Lacoste Free Shirt', category: 'Shirts', image: LuisImg, price: 220, brand: 'Lacoste', rating: 4.8, size: 17, description: 'high quality product', }, { _id: '4', name: 'Nike Slim Pant', category: 'Pants', image: LuisImg, price: 78, brand: 'Nike', rating: 4.5, size: 14, description: 'high quality product', }, { _id: '5', name: 'Puma Slim Pant', category: 'Pants', image: LuisImg, price: 65, brand: 'Puma', rating: 4.5, size: 10, description: 'high quality product', }, { _id: '6', name: 'Adidas Fit Pant', category: 'Pants', image: LuisImg, price: 139, brand: 'Adidas', rating: 4.5, size: 15, description: 'high quality product', }, ], }; export default data;
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda