如何在React / GatsbyJs上定义backgroundImageUrl

Question

我有一个网站项目，在页面组件上有视差组件。 我正在尝试将graphql图像查询响应绑定到background-image url样式属性，但不知道如何编写。

这是我的代码：

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { Parallax, ParallaxLayer } from 'react-spring/renderprops-addons'
import Img from 'gatsby-image'




export default class Teaser extends React.Component {
  constructor(props){
    super(props);
  }

  render () {
    return (
      <Parallax ref={ref => (this.parallax = ref)} pages={3}>
        <ParallaxLayer offset={0} speed={0} factor={3} style={{backgroundImage=url(${this.props.images.edges[0].childImageSharp.fluid.src})}}>

        </ParallaxLayer>
      </Parallax>

      )
  }
}

export const query=graphql`
    query {
        images: allFile(filter:{relativePath:{eq: "chef.jpg"}}) {
          edges {
              node {
                extension
                relativePath
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid
                  }
                }
        }
      }
      }
      }

这是ParallaxLayer的style属性上的背景图像声明。我要实现的是，当图像在容器中向上滚动时，图像在容器中向上移动，

非常感谢您的帮助。