Как задавать путь к изображению в цикле?

Question

[Alex Ozerov]

У меня все данные хранятся в отдельном файле state.js например:

let state = {
    body: {
        home: {
            news:[
                {
                    image: './image/name.jpeg',
                    title: 'title '
                }
            ]
        }
    }
}

В state инфа приходит из парсера, который собирает инфу с другого сайта.
Пытаюсь вывести в компоненте:

{this.props.news.map((item,index) => {
    return(
        <div className={cl.event} key={index}>
                <img src={item.image} alt=""/>
                <div className={cl.title}>
                    <a href="/">{item.title}</a>
                </div>
        </div>
    )
})}

Конечно же изображения не выводятся.

Если сделать вместо image: './image/name.jpeg' => "image: logo" и импортировать в стейте изображение то все заработает. Пример:

import logo from '../images/logo.jpg'

let state = {
    body: {
        home: {
            news:[
                {
                    image: logo,
                    title: 'title '
                }
            ]
        }
    }
}

Очень странным мне кажется такой подход. Как вообще правильно выводить изображения в цикле?

P.S. Пробовал еще так:
<img src={__dirname + item.image} alt=""/>
Но тоже не правильно

Answer 1

[Тигран Абрамян]

Очень странным мне кажется такой подход.

Не странно, не волнуйтесь В реакте используется именно такой подход.

Comments

[Alex Ozerov]

то-есть после того как парсер собрал нужную инфу и сохранил картинку в папку, мне нужно с помощью Node.js в файл state добавлять строчки с импортом? Я просто не до конца понимаю этот подход.

P.S. Я может некорректно излагаю свою мысль: Имеется ввиду, что импорт типа: "import logo from './", он же сам по себе не появляется и писать его вручную было бы глупо. Как тогда его туда прописывать?

[Тигран Абрамян]

Alex Ozerov, полюбому нужно будет импортировать, либо делайте как положено, либо используйте динамические импорты(ES5)
image: require('../images/logo.jpg')
или новую фичу которая не давно вышла(ES10)
image: import('../images/logo.jpg')

Answer 2

[Mikhail Derkach]

я для таких случаев использую webpack require().default, но, насколько я помню, динамический путь в него подставлять нельзя.
Однажды пришлось использовать отдельный массив с require и потом его фильтровать, то еще удовольствие.
Вам, скорее всего, нужно пересмотреть либо подгрузку изображений, либо формат хранения

Возможно, если вы отдаете изображения из БД, то стоит заменить путь к изображению на base64.

В общем, с такой проблемой как у вас сталкивались многие и решить "в лоб" не получится :)

Comments

[Alex Ozerov]

А не подскажите какие-нибудь статьи по этому поводу(на любом языке), меня очень волнует этот вопрос, гугл толковой информации не выдал.

[Mikhail Derkach]

Alex Ozerov, статей не подскажу, но само решение в основном будет выглядеть как тут
https://stackoverflow.com/questions/53762640/how-t...

т.е. вы заранее импортируете все изображения из папки и затем уже работаете с массивом.

допустим, вот у меня в одном проекте есть такая функция (тут я знаю заранее, что мне нужно возвращать не просто элемент, а его ключ ключ default, в котором и хранится путь к изображению)

const imageLoad = function (r) {
  return r
    .keys()
    .map(r)
    .map((a) => a.default);
};

export default imageLoad;

и вот как примерно происходит обращение к изображениям в компоненте (просто пример, суть не в коде)

const faces = imageLoad(require.context('~s/assets/img/faces/', false, /\.(jpg)$/));

мне такое решение не нравится, но оно работает. Однако для этого надо иметь папку где все изображения будут лежать заранее, так что о динамике в целом можно забыть в том виде, как нам хотелось бы