如何使用 Gatsby Image 映射我在 GraphQL 中的默认导出？

Question

我想在 GraphQL 中映射我的导出，而不是重复我的图像 3 次，检查我的代码以了解我。

这是我的出口：

    export default [
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/1.jpg"),

  },
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/2.jpg"),

  },
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/3.jpg"),

  },
]

这是我的导入和 GraphQL

import BackgroundImage from "gatsby-background-image"
import { useStaticQuery, graphql } from "gatsby"
const getData = graphql`
  {
    image1: file(relativePath: { eq: "recent-game/1.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image2: file(relativePath: { eq: "recent-game/2.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image3: file(relativePath: { eq: "recent-game/3.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }

  }
`

在这里我想映射我的图像而不是重复它们，这取决于我的导出

Answer 1

一个可重用的图像组件怎么样？

// Image
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image';

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 1000) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename);
      });
      if (!image) {
        return null;
      }

      // const imageSizes = image.node.childImageSharp.sizes; sizes={imageSizes}
      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />;
    }}
  />
);

export default Image;

还有地图组件。

// Parent
{
  [
    { id: 0, filename: "gatsby-icon.png" },
    { id: 1, filename: "gatsby-icon.png" }
  ].map(item => {
    return (
      <div key={item.id}>
        <Image filename={item.filename} alt={String(item.id)} />
      </div>
    );
  });
}

你当然应该检查 gatsby-source-filesystem。