Setting Background image via JSON Schema in React Inline

Question

I am building a headless site with Gatsby and WP. I have a schema coming through from Wordpress which provides me with my JSON values to plugin.

I am trying to set a background image from a value I am getting from my feed but I cant figure out how to make it work.

I feel like its something stupid simple and I am over thinking this.

<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'
}}>

My schema is below

  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
  }
}

Answer 1

You're missing a $ and a comma. Try this:

backgroundImage: `url(${data.wordpressPage.acf.homepage_boxes.box_3_url})`,