如何在Next.js项目中正确导入存放在src文件夹的本地图片？

你当前的字符串路径写法仅对public目录下的静态资源生效，src目录下的图片需要通过import导入，由Next.js构建工具打包处理后才能正常使用。

具体修改步骤 #

1. 修改数据文件，导入需要的图片 #

在你当前存储产品数据的JS文件顶部，按相对路径导入目标图片（注意补全你自己图片的实际后缀，比如.jpg/.png/.webp），之后直接将导入的变量赋值给image字段：

// 路径根据你当前数据文件的位置调整，示例假设数据文件存放在src/data目录下，图片存放在src/img目录下
import ProductImg from '../img/shoes/men/luis/2.jpg'

const data = {
    products: [
      {
        _id: '1',
        name: 'Nike Slim Shirt',
        category: 'Shirts',
        image: ProductImg, // 直接使用导入的变量，不要写字符串路径
        price: 120,
        brand: 'Nike',
        rating: 4.5,
        size: 10,
        description: 'high quality product',
      },
      // 其余产品配置同理，不同产品用不同图片的话，单独导入对应图片即可
    ],
  };
  export default data;

2. 渲染图片的写法 #

• 推荐使用Next.js内置的next/image组件（自带性能优化、懒加载等能力），直接传入导入的图片变量即可：

import Image from 'next/image'
import productData from './你的数据文件路径'

// 渲染产品列表
{productData.products.map(item => (
  <div key={item._id}>
    <Image
      src={item.image}
      alt={item.name}
      width={300}
      height={300}
    />
    {/* 其他产品信息渲染 */}
  </div>
))}

• 如果使用原生<img>标签，需要取导入对象的src属性：

<img src={item.image.src} alt={item.name} />

补充说明 #

如果你的产品图片数量较多，逐个导入比较繁琐，更建议你将图片迁移到项目根目录的public文件夹下，此时不需要导入操作，直接写字符串路径即可正常访问：
比如图片存放在public/img/shoes/men/luis/2.jpg，image字段直接写/img/shoes/men/luis/2.jpg即可。

内容的提问来源于stack exchange，提问作者juwie