[英]Setting Background image via JSON Schema in React Inline
I am building a headless site with Gatsby and WP.我正在使用 Gatsby 和 WP 构建一个无头站点。 I have a schema coming through from Wordpress which provides me with my JSON values to plugin.
我有一个来自 Wordpress 的模式,它为我提供了插件的 JSON 值。
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.我正在尝试根据从 Feed 中获得的值设置背景图像,但我不知道如何使其工作。
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
}
}
You're missing a $ and a comma.你缺少一个 $ 和一个逗号。 Try this:
尝试这个:
backgroundImage: `url(${data.wordpressPage.acf.homepage_boxes.box_3_url})`,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.