Передача изображения динамически в качестве реквизита дочернему компоненту

Question

В моем родительском компоненте я получаю объект от API, в который я позже вставляю изображение в качестве значения ключ / пара. Затем я передаю этот объект дочернему компоненту для рендеринга, и я попытался выполнить этот пост, чтобы сделать это:

Загрузка изображений на основе динамического пути в ReactJs

Однако, несмотря на копирование необходимого формата импорта изображений веб-пакета, я все еще получаю эту ошибку.

Error: Cannot find module '../images/test.jpg'

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

Вот код из дочернего компонента:

const WorldInfo = (props) =>  {
    return props.world ? (
        <div className={props.className}>
            <h1>{props.world.map}</h1>
             <img src={require(`${props.world.image}`)}/>
        </div>
    ) : 
        null
}

Спасибо за поиск друзей!

Answer 1

Вместо передачи полного пути (относительного или абсолютного), передайте только фамилию (test.jpg). WebPack обнаружит динамическое требование и объединит все файлы в папке, например: require('../images/' + props.world.image).