Динамический импорт с React и приложением create-реагировать

Question

У меня есть изображение компонента, которое использует значение из цикла.

что-то вроде:

arr.map(m => <Component imgsrc={m.src} />)

где src prop - ссылка на папку с изображениями. тогда я делаю

<img src={require(`${props.imgsrc}`)} />

но если не работает, то если я использую его статически это работает.

В чем разница?

Answer 1

Webpack должен знать, в каком каталоге искать, так как он должен знать во время сборки, какие каталоги включать в сборку. Если весь путь является динамическим, Webpack должен будет включить в сборку всю файловую систему, что было бы невозможно.

Вы можете сделать части пути динамическими, если Webpack может выяснить, где искать.

<img src={require(`../images/${props.imgsrc}.png`)} />