gatsby-image: как импортировать обработанное изображение в css и использовать его со свойством background-image

Question

Я успешно внедрил изображение gatsby в свой проект и заменил множество тегов img, которые используются в моих компонентах.Но сейчас я пытаюсь оптимизировать фоновое изображение для некоторых из моих компонентов, но я не знаю, как, так как использование gatsby-image сгенерирует новый тег img, и я не могу использовать это для стилизации в качестве фона, скажем, для элемента div.Может ли S1 показать мне, как я могу использовать созданные изображения с CSS.Вот мой код:

const HeaderlineSection = ({headerOne}) => {
  return(
    <div className="header-back" ></div>
  )
}

export const query = graphql`
  query IndexPageQuery {
    headerOne: imageSharp(id: { regex: "/header_one.jpg/" }) {
      sizes(maxWidth: 1200 ) {
        ...GatsbyImageSharpSizes
      }
    }
  }

ранее, в моем CSS я использую неоптимизированное изображение для backgroud-image:

.header-back {
  background: url(../images/header_one.jpg) 50% 0 no-repeat;
  height: 470px;
  width: 100%;
}

Answer 1

Я использую плагин gatsby-background-image .Вот один пример того, как вы можете его использовать:

import React from 'react'
import { graphql, StaticQuery } from 'gatsby'
import styled from 'styled-components'

import BackgroundImage from 'gatsby-background-image'

const BackgroundSection = ({ className }) => (
    <StaticQuery query={graphql`
      query {
        desktop: file(relativePath: { eq: "seamless-bg-desktop.jpg" }) {
          childImageSharp {
            fluid(quality: 100, maxWidth: 4160) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `}
     render={data => {

       const imageData = data.desktop.childImageSharp.fluid
       return (
          <BackgroundImage Tag="section"
                           className={className}
                           fluid={imageData}
                           backgroundColor={`#040e18`}
          >
            <h1>Hello gatsby-background-image</h1>
          </BackgroundImage>
       )
     }
     }
    />
)

const StyledBackgroundSection = styled(BackgroundSection)`
  width: 100%;
  background-repeat: repeat-y;
`

export default StyledBackgroundSection

Код не требует пояснений, но в основном элемент будет заменен элементом, выбранным в атрибуте Tag, и будет иметьдля фонового изображения установлено значение, выбранное с помощью запроса graphql imageSharp.