如何通过程序化路径引入Next.js中的静态图片？

问题核心是Webpack在静态编译时，需要明确的文件扩展名来识别资源类型。当你把完整文件名拆成变量后，Webpack无法提前解析到具体的文件类型，导致加载失败。下面提供几种可行的解决办法：

方法1：使用require.context预加载资源 #

通过require.context让Webpack提前扫描指定目录下的所有目标图片，这样就能通过动态路径获取资源：

import Image from "next/image"

// 预加载../docs目录下所有子目录中的cover.jpg
const imageContext = require.context('../docs', true, /cover\.jpg$/)

// 组件中使用
<Image
  alt="封面图"
  src={imageContext(`./${props.value}/cover.jpg`)}
  width={600}
  height={400}
/>

这个方法适合需要动态加载大量符合特定命名规则的图片，且希望保持原有目录结构的场景。

方法2：固定扩展名，拆分变量 #

如果你的图片扩展名是固定的（比如都是.jpg），可以把文件名和扩展名拆分，确保Webpack能识别到扩展名：

import Image from "next/image"

const coverBaseName = "cover"

<Image
  alt="封面图"
  src={require(`../docs/${props.value}/${coverBaseName}.jpg`)}
  width={600}
  height={400}
/>

这种写法保留了变量的灵活性，同时让Webpack能正确解析资源类型。

方法3：将图片放到public目录 #

把图片移动到Next.js的public/docs目录下，直接使用URL路径访问，无需require：

import Image from "next/image"

const cover = "cover.jpg"

<Image
  alt="封面图"
  src={`/docs/${props.value}/${cover}`}
  width={600}
  height={400}
/>

这是最简便的方案，public目录下的资源会被Next.js自动处理优化，适合大多数动态路径图片的需求。

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