背景图像数据未正确通过 graphql Gatsby 查询答案

【问题标题】：Background image data not passing properly through graphql Gatsby query背景图像数据未正确通过 graphql Gatsby 查询
【发布时间】：2020-09-05 21:23:51
【问题描述】：

我认为此时我已经查看了太长时间并且可能没有看到明显的东西，但我无法弄清楚为什么我的查询没有正确获取背景图像数据而是显示为空。我正在使用 package.json 中加载的"gatsby-background-image": "^1.1.1"。我在我的 gatsby-config.js 中引用我的图像文件，如下所示：

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },

以及使用它的组件：

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

import BackgroundImage from 'gatsby-background-image';

const BackgroundSection = () => (
  <StaticQuery
    query={graphql`
      query {
        desktop: file(relativePath: { eq: "demo.jpg" }) {
          childImageSharp {
            fluid(quality: 90, maxWidth: 1920) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `}
    render={data => {
      /* eslint-disable no-console */
      console.log(data);
      /* eslint-enable no-console */

      // Set ImageData.
      const imageData = data.desktop.childImageSharp.fluid;

      return (
        <BackgroundImage
          Tag="section"
          fluid={imageData}
          backgroundColor={`#040e18`}
        >
          <h2>gatsby-background-image</h2>
        </BackgroundImage>
      );
    }}
  />
);

const StyledBackgroundSection = styled(BackgroundSection)`
  width: 100%;
  background-position: bottom center;
  background-repeat: repeat-y;
  background-size: cover;
`;

export default StyledBackgroundSection;

我错过了什么？

【问题讨论】：

标签： reactjs graphql gatsby gatsby-image

【解决方案1】：

更改了一些语法以使其更现代，同时更新了一些依赖项，所以老实说，我并不完全确定是什么修复了它，但这里是我的 github compare 以显示它何时通过测试以及何时没有通过测试。起初，这种新语法似乎也不起作用，但最终确实通过了数据。

如果有人好奇，我的 bgimage.js 代码最终看起来像这样：

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import styled from 'styled-components';
import BackgroundImage from 'gatsby-background-image';
import { theme } from '@styles';
const { colors } = theme;

/**
 * In this functional component a fullscreen <BackgroundImage />  is created.
 * @param className   string    className(s) from styled-components.
 * @param children    nodes     Child-components.
 * @return {*}
 * @constructor
 */
const FullBackground = ({ children }) => {
  const { desktop } = useStaticQuery(
    graphql`
      query {
        desktop: file(relativePath: { eq: "bg/pompidou.jpg" }) {
          childImageSharp {
            fluid(quality: 90, maxWidth: 3024) {
              ...GatsbyImageSharpFluid_withWebp_tracedSVG
            }
          }
        }
      }
    `);

  // Watch out for CSS's stacking order, especially when styling the individual
  // positions! The lowermost image comes last!
  const backgroundFluidImageStack = [
    desktop.childImageSharp.fluid,
    `linear-gradient(${colors.alphaNavy}, ${colors.alphaNavy})`,
  ].reverse();

  return (
    <BackgroundImage
      Tag="section"
      fluid={backgroundFluidImageStack}
      title="Fullscreen Background"
      id="fullscreenbg"
      role="img"
      aria-label="Fullscreen Background"
      preserveStackingContext={true}
      style={{
        // Defaults are overwrite-able by setting one of the following:
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
        // backgroundRepeat: '',
        backgroundAttachment: 'fixed',
      }}
    >
      {children}
    </BackgroundImage>
  );
};

const StyledFullBackground = styled(FullBackground)`
`;

export default StyledFullBackground;```

【讨论】：