从props向src添加动态本地图像

Question

我是React的新手，偶然发现了一个我找不到答案的问题。

我需要将本地图像源传递给img的src属性，但需要通过道具传递。有没有一种方法可以实现本地图像（不能使用url）。我已经读到，如果您指定require，则不能使用变量。

我认为我可能必须使用webpack来解决此问题，但我对此并不熟悉。

Answer 1

首先，fyi-require不是React API，它是commonjs api，主要用于node.js中 第二-看来您遇到了两个问题：

1. 使用本地图像，而不使用URL。嗯，JavaScript不能像其他语言/框架一样编译为dll，而是一种脚本语言。因此，您不能将映像嵌入到系统中。但是，您可以在dist文件夹中创建一个文件夹（也可以通过webpack构建创建），该文件夹将包含您的资产-例如图像。然后，您可以通过相对URL将其导入到您的代码中。如果它在JSX中，则可以像导入任何其他包一样使用相对路径来导入它。如果是CSS，则可以使用url（...）语法。

2. 通过道具传递url-就像其他所有内容一样。您在组件参考中提到了要用作prop字段的字段，比如说“ image”，在组件内部可以使用this.props.image。使用简单的字符串或上面提到的导入的“对象”-的行为将完全相同，您可以在img src字段中使用它。

祝你好运！