1

我想在这一点上，我已经看得太久了，可能没有看到明显的东西，但我不明白为什么我的查询没有正确获取背景图像数据，而是显示为空。我正在使用"gatsby-background-image": "^1.1.1"加载在 package.json 中。我在我的 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;

我错过了什么？

4

1 回答 1

1

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

如果有人好奇，我的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;```
于 2020-05-21T18:21:44.623 回答