如何使用 nextjs 导入图像？答案

【问题标题】：How to import image using nextjs?如何使用 nextjs 导入图像？
【发布时间】：2021-12-26 20:27:44
【问题描述】：

我使用 in 创建了一个对象数组，并且我想将存储在我的笔记本电脑文件夹中的图像导入到我的项目中。这是我正在处理的 next.js 项目。如何在 next.js 的笔记本电脑文件夹中正确导入图像图像在 src 文件夹中，而不是在我的公用文件夹中。感谢您的宝贵时间

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;

【问题讨论】：

我建议您将所有静态资产移至公用文件夹，并从 Next.js Static File Serving 中受益。否则，您用于图像路径的相对路径将根据您从中导入图像的位置而有所不同。

标签： javascript reactjs json image next.js

【解决方案1】：

有几点需要注意：

接下来使用Webpack 构建您的应用程序服务器端。 URL 路径必须作为 ES 模块导入，以便当 Webpack 修改您的文件时，新的 URL 可以正确插入到您的应用程序中。
如果您是 serving static files，则它们必须位于应用程序根目录的 /public 文件夹中。

修改代码示例：

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;

【讨论】：