reactjs - 如何在 React/GatsbyJs 上定义 backgroundImageUrl

Question

我有一个在页面组件上带有视差组件的网站项目。我正在尝试将 graphql 图像查询响应绑定到背景图像 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 样式属性的背景图像声明。我想要实现的是在向上滚动时向下滚动和向下滚动时使图像在容器内略微移动，

我在这里先向您的帮助表示感谢。