相关疑难解决方法(0)

我一直在试图弄清楚如何通过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)} />

对于实际属性,我已经尝试了几乎所有我能想到的项目根目录,反应应用程序根目录和组件本身的路径.

文件系统

|-- 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进行此操作,或者我只是走错路来接近这个？