2

Всем привет! Имею в json-e массив объектов вида:

var pictures = [{
    image: './images/img1.png',
    'description': 'defjffhhf'
}, {
    image: './images/img1.png',
    'description': 'defjffhhf'
}, {
    image: './images/img3.png',
    'description': 'defjffhhf'
}, {
    image: './images/img4.png',
    'description': 'defjffhhf'
}]

и т.д. их около 50 штук. Я рандомным образом через js выбираю одну из них.

Как мне правильно передавать одну из этих картинок в компонент и вcтавлять background-ом ? Делаю через инлайн-стили
backgroundImage: 'url(${this.props.image})'
Может, есть еще способы, чтобы не использовать инлайн-стили? И при этом так не работает, приходится прописывать полный урл к картинке. через добавление модификатора работает. Добавляю дополинтельный класс и в стилях прописываю уже
backgroung-image: url('./images/img1.png')

Хотелось бы как-нибудь через модификатор, но делать 50 штук модификаторов с названиями картинки тоже как-то не очень

4
  • Почему не прописывать стиль блоку программно? Например: document.body.style.backgroundImage = url;
    – Влад
    26 сен 2017 в 19:35
  • у меня на react-е все это
    – werty
    26 сен 2017 в 19:38
  • Дайте кусок кода как вы делаете все это 26 сен 2017 в 19:40
  • А где у вас код react ? 13 окт 2017 в 7:27

1 ответ 1

0

можно через styled-components:

render() {
    const {color} = this.state;
    const Div = styled.div`
        color: ${color}
    `;
    return (
        <Div>color text</Div>
    );
}

Соответственно, в styled.div вместо color - написать свой css код, а в качестве переменной вставлять путь к выбранной картинке

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.