Требовать путь для изображения src как переменную

Question

Я работаю над реактивным проектом, созданным с помощью приложения create-реагировать.

У меня есть массив объектов данных.Одним из свойств объекта является путь к изображению.Если я помещу путь непосредственно в тег src и использую require, он работает.

<img src={require(`./../../../assets/images/1425629.svg`)} />

Если я использую переменную, что мне нужно сделать, потому что путь исходит от объекта, я получаю следующую ошибку:

<img src={require(`${data.image}`)} />

Error: Cannot find module './../../../assets/images/1425629.svg'

[Больше редактирования кода]

Это основа моего объекта (здесь он стал менее сложным)

const data = [
    {
        image: `./../../../assets/icons/1458.svg`,
        title: 'title1',
        description: 'description1'
    },
    {
        image: `./../../../assets/icons/48754.svg`,
        title: 'title2',
        description: 'description2'
    },
    {
        image: `./../../../assets/icons/7548.svg`,
        title: 'title3',
        description: 'description3'
    }
];

Этот компонент контейнера передает нужные данныек функциональному компоненту

const BlogInfo = ({ id }) => <Info {...data[id]} />;

И это основа функционального компонента

const Info = ({ image, title, description }) => {
    return (
        <div>
            <img src={require(`${image}`)} />
            <h1>{title}</h1>
            <p>{description}</p>
        </div>
    );
};

Так что в функциональном компоненте работает следующее

<img src={require(`./../../../assets/images/1425629.svg`)} />

и

import icon from './../../../assets/images/1425629.svg';

<img src={icon} />

но способ, которым я хочу достичь (динамически), не

<img src={require(`${image}`)} />

Answer 1

Ошибка в том, что когда приложение реагирует на хост, путь к изображению изменяется на динамическое значение, которое относится к пути вашего хоста.Это связано с комплектацией через веб-пакет.Так что реагируйте, используйте require.context, который поставляется из веб-пакета.

export json и получите все необходимые пути.Затем сделайте следующее:

var cache = [];

function importAll (r) {
  r.keys().forEach((key,index) => cache[index] = r(key));
}    

//path from json
importAll(require.context(path, false, /\.(png|jpe?g|svg)$/));
export default cache;

кеш будет массивом всех изображений, которые вам нужны

в вашем теге img, сделайте следующее

<img src={cache[0]}/>

, если вы уже знаетепуть, который вы могли бы просто импортировать как

import img from imgPath
...
<img src = {img}/ >

Надеюсь, это поможет