Next.js中图片路径存入变量后无法加载的问题求助

问题根源：Next.js 基于 Webpack 打包，Webpack 在构建时会静态分析资源路径——只有直接写在require里的字符串路径，才能被识别并打包进项目。用变量、模板字符串这类动态路径的话，Webpack 没法提前预知要打包哪些图片，自然会报"找不到模块"的错。

下面给几个实用的解决方法：

方法1：提前导入+对象映射（适合少量图片） #

把需要的图片先逐个导入，用对象存起来，使用时通过键名获取：

// 先导入所有需要的图片
import image1 from '../assets/image1.png';
import image2 from '../assets/image2.png';

// 用对象做映射
const imageMap = {
  image1,
  image2
};

// 使用示例
<Image src={imageMap.image1} alt="示例图片" />

这种方式完全是静态导入，Webpack 能正常识别所有资源，不会出问题。

方法2：把图片放在public目录（适合任意数量） #

Next.js 的public目录是静态资源根目录，放在这里的图片可以直接用字符串路径引用，不需要require：

// 假设图片路径是 public/images/image1.png
const imgPath = '/images/image1.png';

// 使用时直接传路径字符串
<Image src={imgPath} alt="示例图片" width={300} height={200} />

注意：路径要以/开头（对应public目录的根），而且Image组件必须指定width和height，或者用fill属性配合容器样式实现自适应。

方法3：用require.context批量导入（适合大量同目录图片） #

如果有一堆图片在同一个目录下，不想一个个导入，可以用Webpack的require.context批量加载：

// 加载../assets目录下所有.png图片（不遍历子目录）
const imageContext = require.context('../assets', false, /\.png$/);

// 封装一个获取图片的函数
const getImage = (fileName) => imageContext(`./${fileName}.png`);

// 使用示例：获取image1.png
<Image src={getImage('image1')} alt="示例图片" />

require.context的三个参数分别是：资源目录、是否遍历子目录、匹配文件的正则表达式。Webpack会提前扫描符合条件的图片并打包，动态调用时就能正常获取。

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