@ozerovlife

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

У меня все данные хранятся в отдельном файле 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=""/>
Но тоже не правильно
  • Вопрос задан
  • 63 просмотра
Решения вопроса 2
TAbrahamyan
@TAbrahamyan
Очень странным мне кажется такой подход.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы