Я намагався зрозуміти, як динамічно додавати зображення за допомогою 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....
Чи є спосіб зробити це, використовуючи реакцію та веб-пакет за допомогою завантажувача url, або я просто йду невірним шляхом, щоб підійти до цього?