Question

0

654

Views

How to import image using nextjs?

I created an array off object using in and i want to import an image stored in my laptop folder to my project . This is a next.js prpject i am working on . How do i properly import an image in my laptop folder in next.js The image is in the src folder , not in my public folder . Thank you for your time

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 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T10:23:35.835Z

A couple of things to note:

Next uses Webpack to build your application server-side. The URL paths must be imported as ES modules so that when Webpack modifies your files, the new URLs can be inserted correctly into your application.
If you are serving static files they must be located in the /public folder in the root of your application.

Example of modified code:

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;

0

654

How to import image using nextjs?

1 answers

0

Find remote jobs

Andres GPT