为什么可以用 require("../images/restaurants/sea.jpeg") 导入图像，但不能用 require(this.props.image)答案

【问题标题】：Why can image be imported with require("../images/restaurants/sea.jpeg"), but not with require(this.props.image)为什么可以用 require("../images/restaurants/sea.jpeg") 导入图像，但不能用 require(this.props.image)
【发布时间】：2019-12-18 19:55:48
【问题描述】：

在我的 create-react-app 项目中，我正在构建一个包含图像的反应组件。我想将确切的图像位置作为组件属性（或状态）传递。在我的组件中，我正在使用 require，如下所示：

<Image
      height={"100px"}
      borderRadius={8}
      src={require(this.props.image)}
      alt="logo"
    />

这给出了这个错误：

Error: Cannot find module '../images/restaurants/sea.jpeg'

webpackEmptyContext
src/components sync:2

但是，当我将通过属性传递的确切值硬编码为 require 时，它确实有效！

<Image
      height={"100px"}
      borderRadius={8}
      src={require("../images/restaurants/sea.jpeg")}
      alt="logo"
    />

为什么这会如此违反直觉？最好的解决方法是什么？

【问题讨论】：

如果你真的需要require 你的图像作为base64 uri，它通常在组件定义之外完成。然后将 uri 字符串作为道具传递。在render 函数中确实没有理由require。 Eslint 通常会警告您，因为您所做的不是“典型的”eslint.org/docs/rules/global-require

标签： javascript reactjs webpack require

【解决方案1】：

Webpack 需要在打包时知道该文件 - 否则它不会包含它（它会尝试减小打包的大小）。

如果您将文件路径作为道具传递，它在捆绑时不知道它 - 它只在运行时知道它。

传递 base64 编码图像的建议解决方案是一个很好的解决方案 - 或者您可以将 url 传递给公共托管的图像？

【讨论】：

【解决方案2】：

如果图像集在编译时是固定的并且是已知的，那么您有办法实现您想要的。为此，您必须将所有此类图像放在一个文件夹中，并使用 webpack.ContextReplacementPlugin 为该文件夹创建一个 webpack 上下文。然后，当您需要该图像时，您必须使用此语法 require("images/restaurants/" + this.props.image) 假设 webpack 上下文是为 images/restaurants 创建的，并且 this.props.image 仅包含文件名。

【讨论】：