Как определить backgroundImageUrl в React / GatsbyJs - PullRequest
Новая
       27

Как определить backgroundImageUrl в React / GatsbyJs

0 голосов
/ 22 февраля 2019

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

Вот мой код: 

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.Чего я хочу добиться, так это чтобы изображение слегка перемещалось внутри контейнера вверх при прокрутке вниз и вниз при прокрутке вверх,

Спасибо за помощь заранее.

...