从道具添加动态本地图像到src答案

【问题标题】：Add dynamic local image to src from props从道具添加动态本地图像到src
【发布时间】：2018-10-25 06:21:21
【问题描述】：

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

我需要将本地图像源传递给 img 的 src 属性，但它需要通过 props 传递。有没有办法为本地图像实现这一点（不能使用 url）。我读过，如果你指定 require，你就不能使用变量。

我想我可能不得不使用 webpack 来解决这个问题，但我对此并不熟悉。

【问题讨论】：

【解决方案1】：

首先，fyi - require 不是 React API，它的 commonjs api，主要用于 node.js 第二 - 您似乎提出了两个问题：

使用本地图片，不使用 URL。好吧，javascript 不像其他语言/框架那样编译为 dll，它是一种脚本语言。因此，您不能将图像嵌入到系统中。但是，您可以在 dist 文件夹中创建一个文件夹（也可以通过 webpack 构建创建），其中将包含您的资产 - 例如图像。然后，您可以通过相对 URL 将其导入您的代码。如果它在 JSX 中，那么您可以像导入任何其他包一样使用相对路径导入它。如果是 css，你可以使用 url(...) 语法。
通过 props 传递 url - 就像其他一切一样。您在组件引用中提到要用作道具字段的字段，比如说“图像”，并且在组件内部您可以使用 this.props.image。在那里使用简单的字符串或上面提到的导入的“对象” - 行为完全一样，您可以在 img src 字段中使用它。

祝你好运！

【讨论】：

非常感谢您的帮助。我仍然不清楚的一件事是我在项目中有一个图像文件夹，我可以使用 Import ok 引用图像的相对路径路径，但我不能直接在 src 中引用它（不使用'require'） .所以我必须使用 webpack（并更改配置文件以允许这样做）？