在 React 中使用 this.props.src 导入图像

【问题标题】：Import image using this.props.src in React在 React 中使用 this.props.src 导入图像
【发布时间】：2017-08-06 20:03:46
【问题描述】：

我给我的组件 2 个 props src 和 alt 以便它可以显示如下图像：

<img src={require(this.props.src)} alt={this.props.alt} />

运行我的应用程序给我这个错误

错误：找不到模块“。”

我尝试了图像 URL，它是正确的并且可以工作，当我提供需要道具时，应用程序只是不想工作。

【问题讨论】：

为什么需要require？你不能只有src={this.props.src} 吗？
不，webpack 正在处理所有文件。
你不应该在运行时需要这样的文件。给它一个来自目标文件夹的绝对路径。

标签： javascript node.js reactjs webpack

【解决方案1】：

如果您使用的是 webpack，我将假设您使用的是 webpack 图像加载器。如果是这种情况，则意味着您正在组件中导入图像，可能使用命名导入。在这种情况下，您可以将命名的导入作为道具传递给子组件，或者直接在导入所在的组件上使用它。

// named import
import landscape from "./img/landscape.jpg";
// child component
import Child from "./components/child";

const Parent = () => 
  <div>
    <Child src={landscape} />
  </div>;


// then the child component could look like this
const Child = (props) => 
  <div>
    <img src={props.src} />
  </div>;

如果不是这样，请提供有关 webpack 如何处理组件中的图像的更多信息。

【讨论】：