gatsby背景图片插件使用方法

Question

我是 gatsby 的新手，我正在尝试使用 gatsby 背景图像插件，但它不起作用，图像不会显示在屏幕上。

这是我的代码：

import * as React from "react"
import { graphql, useStaticQuery } from 'gatsby'
import { createGlobalStyle } from "styled-components"
import BackgroundImage from 'gatsby-background-image'


const GlobalStyle = createGlobalStyle`
body{
    background-color: #270A63;
    margin : 0px;
   display:flex;
   
    
}`


const Layout = (props, { children }) => {

  const data = useStaticQuery(
    graphql`
      query {
        bgImage : file(relativePath: {eq: "background.png"}) {
          childImageSharp {
            gatsbyImageData(quality: 90)
          }
        }
      }
    `
  )

  const imageData = data.bgImage.childImageSharp.gatsbyImageData;

  return (
    <React.Fragment>
      <GlobalStyle />
      <BackgroundImage

        Tag="section"
        image={imageData}
        
      >
      </BackgroundImage>

    </React.Fragment>

  )
 
}

export default Layout

布局是我在索引页中使用的自定义组件。我使用 console.log 检查 imageData，它是一个看起来像这样的对象：

{bgImage:
childImageSharp:
gatsbyImageData:
backgroundColor: "#680818"
height: 1117
images:
fallback: {src: '/static/32d467ee3060062ab794e34f2002c807/f89cf/background.png', srcSet: '/static/32d467ee3060062ab794e34f2002c807/5829e/bac…60062ab794e34f2002c807/f89cf/background.png 1010w', sizes: '(min-width: 1010px) 1010px, 100vw'}
sources: [{…}]
[[Prototype]]: Object
layout: "constrained"
width: 1010}

我不明白为什么它不起作用。

感谢您的帮助！

Answer 1

根据您的 GraphQL，您使用的是大于或等于 3 的 Gatsby 版本。我认为您的代码片段应该类似于：

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import { getImage, GatsbyImage } from "gatsby-plugin-image"

import { convertToBgImage } from "gbimage-bridge"
import BackgroundImage from 'gatsby-background-image'

const GbiBridged = () => {
  const { bgImage }= useStaticQuery(
    graphql`
      query {
        bgImage : file(relativePath: {eq: "background.png"}) {
          childImageSharp {
            gatsbyImageData(quality: 90)
          }
        }
      }
    `
  )
  const image = getImage(bgImage)
  const backgroundImage= convertToBgImage(image)

  return (
   <React.Fragment>
     <GlobalStyle />
       <BackgroundImage
         Tag="section"
         {...backgroundImage}
         preserveStackingContext
       >
         <div style={{minHeight: 1000, minWidth: 1000}}>
           <GatsbyImage image={image} alt={"testimage"}/>
         </div>
       </BackgroundImage>
   </React.Fragment>
  )
}
export default GbiBridged

修改自：https://www.gatsbyjs.com/plugins/gatsby-background-image/#gatsby-34--gatsby-plugin-image 应用您的代码

Gatsby 从 gatsby-image (Gatsby 1 and 2) to gatsby-plugin-image（第 3 版开始）更改了图像插件。除此之外，它还更改了图像数据的内部 GraphQL 节点，因此使用 gatsby-background-image 的解决方法也相应更改。在您的情况下，您使用的是 gatsby-image 的弃用版本，因此您的代码无法显示图像。

您可以关注此 GitHub 主题中的完整讨论：https://github.com/timhagn/gatsby-background-image/issues/141

Answer 2

我建议不要为此使用任何外部插件，而是使用 CSS 来实现。这样您就不必学习任何新的 third-party 插件，并且可以使用您所掌握的 CSS 知识。这是文档中的示例：https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#background-images

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

export function Hero() {
  return (
    <div style={{ display: "grid" }}>
      {/* You can use a GatsbyImage component if the image is dynamic */}
      <StaticImage
        style={{
          gridArea: "1/1",
          // You can set a maximum height for the image, if you wish.
          // maxHeight: 600,
        }}
        layout="fullWidth"
        // You can optionally force an aspect ratio for the generated image
        aspectRatio={3 / 1}
        // This is a presentational image, so the alt should be an empty string
        alt=""
        // Assisi, Perúgia, Itália by Bernardo Ferrari, via Unsplash
        src={
          "https://images.unsplash.com/photo-1604975999044-188783d54fb3?w=2589"
        }
        formats={["auto", "webp", "avif"]}
      />
      <div
        style={{
          // By using the same grid area for both, they are stacked on top of each other
          gridArea: "1/1",
          position: "relative",
          // This centers the other elements inside the hero component
          placeItems: "center",
          display: "grid",
        }}
      >
        {/* Any content here will be centered in the component */}
        <h1>Hero text</h1>
      </div>
    </div>
  )
}

gatsby背景图片插件使用方法

How to use gatsby background image plugin

reactjs

gatsby

gatsby-image