Question

在我的create-react-app项目中，我正在构建一个带有图像的react组件。我想将确切的图像位置作为组件属性（或-state）传递。在我的组件中，我正在使用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

但是，当我对通过属性传递的确切值进行硬编码时，它确实起作用了！

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

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

Answer 1

Webpack在捆绑时需要了解该文件-否则它将不包含该文件（它试图减小捆绑的大小）。

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

建议的通过base64编码的图像的解决方案是一个好方法-或者您可以将URL传递到公共托管的图像？

Answer 2

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

为什么可以使用require（“ ../ images / restaurants / sea.jpeg”）导入图像，但不能使用require（this.props.image）导入图像

2 个答案: