Я пытался выяснить, как динамически добавлять изображения через 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....
Есть ли способ сделать это, используя реакцию и webpack с url-loader, или я просто иду по неправильному пути, чтобы приблизиться к этому?