reactjs - 动态添加图像 React Webpack

Question

我一直在尝试弄清楚如何通过 React 和 Webpack 动态添加图像。我在 src/images 下有一个图像文件夹，在 src/components/index 下有一个组件。我正在使用 url-loader 和以下 webpack 配置

    {
      test: /\.(png|jpg|)$/,
      loader: 'url-loader?limit=200000'
    }

在组件中，我知道在创建组件之前我可以在文件顶部为特定图像添加require(image_path)，但我想让组件通用并让它具有属性以及从父组件传递的图像的路径。

我尝试过的是:

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

对于实际属性，我几乎尝试了从项目根目录、从 React 应用程序根目录到组件本身到图像的所有路径。

文件系统

|-- src
|   ` app.js
|   `--images
|      ` image.jpg
|      ` image.jpg
|   `-- components
|      `parent_component.js
|      `child_component.js

父组件基本上只是一个容纳多个子组件的容器，所以...

<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....

有没有什么方法可以使用react和webpack以及url-loader来做到这一点，或者我只是走了一条错误的道路来实现这个目的？

Answer 1

使用此处描述的 url-loader ( SurviveJS - Loading Images )，然后您可以在代码中使用:

import LogoImg from 'YOUR_PATH/logo.png';

和

<img src={LogoImg}/>

编辑:精确地说，使用此技术将图像内联到 js 存档中。对于小图像来说，它可能是值得的，但请明智地使用该技术。