Настройка фонового изображения с помощью JSON Схема в React Inline - PullRequest
0 голосов
/ 10 января 2020

Я создаю сайт без головы с Гэтсби и WP. У меня есть схема из Wordpress, которая предоставляет мне мои JSON значения для плагина.

Я пытаюсь установить фоновое изображение из значения, которое я получаю из своего канала, но я не могу понять, как заставить его работать.

Я чувствую, что это что-то глупое простое, и я над этим подумал.

<h1>{data.wordpressPage.acf.intro_text}</h1>

<div className="box" style={{  
  backgroundImage: `url({data.wordpressPage.acf.homepage_boxes.box_3_url})`
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}>

Моя схема ниже

  wordpressPage(wordpress_id: {eq: 10}) {
    id
    title
    acf {
      intro_text
      intro
      homepage_boxes {
        box_1_image {
          source_url
        }
        box_2_image {
          source_url
        }
        box_3_image {
          source_url
        }
        box_3_url
        box_2_url
        box_1_text
        box_2_text
        box_3_text
        box_1_url
      }
    }
    wordpress_id
    guid
    slug
    content
  }
}

1 Ответ

0 голосов
/ 10 января 2020

Вам не хватает $ и запятой. Попробуйте это:

backgroundImage: `url(${data.wordpressPage.acf.homepage_boxes.box_3_url})`,
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...