Eu tenho tentado descobrir como adicionar imagens dinamicamente via React e Webpack. Eu tenho uma pasta de imagens emsrc / images e um componente sobsrc / componentes / índice. Estou usando o url-loader com a seguinte configuração para o webpack

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

Dentro do componente eu sei que posso adicionarrequire (caminho_da_imagem) para uma imagem específica na parte superior do arquivo antes de criar o componente, mas quero que o componente seja genérico e faça com que ele use uma propriedade com o caminho da imagem que é passada do componente pai.

O que eu tentei é:

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

Para a propriedade real, tentei praticamente todos os caminhos em que consigo pensar na imagem da raiz do projeto, da raiz do aplicativo de reação e do próprio componente.

Sistema de arquivo

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

O componente pai é basicamente apenas um contêiner para armazenar múltiplos da criança, então ...

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

Existe alguma maneira de fazer isso usando o react e o webpack com o url-loader ou estou apenas seguindo um caminho errado para abordar isso?