React中require()无法处理映射的引用图片链接问题

这个问题其实和Webpack的模块打包机制直接相关，我来给你拆解清楚：

问题原因 #

Webpack在编译阶段就需要确定要打包哪些静态资源（比如图片），它无法在运行时动态解析完全未知的路径：

• 对于require(../images/${news.image})（image1的写法）：Webpack能识别到固定的基础路径../images/，它会提前把这个目录下所有符合扩展名的图片都打包进去，运行时再动态替换${news.image}对应的文件名，所以能正常加载。
• 对于require(${news.imageSrc})或require(news.imageSrc)（image2和image3的写法）：news.imageSrc是一个完全动态的变量，Webpack编译时根本不知道这个变量指向哪个具体路径，无法提前打包对应的图片资源，所以运行时会找不到文件，自然无法生效。

解决办法 #

根据你的需求（不想每次修改src、数组动态变化），推荐以下几种方案：

1. 保持基础路径静态，仅动态传递文件名 #

这是最稳妥的方案，就像你image1的写法一样。让你的数据数组里只存储文件名（比如news.image = 'news-img1.jpg'），固定的路径写在require的静态部分：

<img src={require(`../images/${news.image}`)} alt={news.title} />

Webpack会预打包../images/目录下的所有图片，不管数组怎么动态变化，只要文件名正确就能加载。

2. 使用require.context预加载整个图片目录 #

如果你的图片目录结构固定，可以用require.context在组件初始化时就加载整个目录的图片，之后直接通过文件名获取：

// 在组件顶部创建图片上下文
const imagesContext = require.context('../images/', false, /\.(jpg|png|gif)$/);

const NewsList = ({ newsList }) => {
  const listItems = newsList.map((news) => {
    return (
      <li key={news.id}>
        {/* 用上下文加载图片，传入相对上下文的文件名 */}
        <img src={imagesContext(`./${news.image}`)} alt={news.title} />
      </li>
    )
  })
  // ... 其余代码
}

require.context的三个参数分别是：目标目录、是否递归查找子目录、匹配文件的正则表达式。Webpack会打包所有符合规则的图片，运行时可以直接通过文件名调用。

3. 将图片放在public目录下，直接使用绝对路径 #

如果图片数量极大且动态性很强，不想让Webpack预打包，可以把图片放到项目的public目录下（比如public/images/），然后直接用绝对路径访问：

<img src={`/images/${news.image}`} alt={news.title} />

public目录下的资源不会被Webpack处理，会直接复制到最终的输出目录，运行时通过URL直接访问，适合完全动态的图片场景。

为什么不推荐import？ #

正如你所说，import是静态的，必须在代码层面明确写出每个图片的路径，无法适配动态变化的数组，所以确实不是最佳方案。

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