使用 GraphQL 映射 Gatsby 画廊图像

Question

我试图弄清楚如何使用 graphql 查询将图库图像映射到 Gatsby 中的灯箱组件中。我想我需要设置images = to the childimage sharp array，但我不知道如何构建它，不断出现undefined错误。任何指示将不胜感激。如果需要更多信息，请告诉我。import React from "react"import { graphql, Link } from "gatsby"import Image from "gatsby-image"import ImageGallery from 'react-image-gallery';const ComponentName = ({ data }) => {  const {id, galleryImage} = data.home  console.log('data is', data)    const images = [];return (    <Layout>    <section className="template">    <ImageGallery items={images} />;    </section>    </Layout>    )}export const query = graphql`  query GetSingleHome($slug: String) {    home: strapiHomes(slug: { eq: $slug }) {    galleryImage {      formats {        large {          childImageSharp {            fluid {              ...GatsbyImageSharpFluid            }            id          }        }        small {          childImageSharp {            fluid {              ...GatsbyImageSharpFluid            }            id          }        }      }    }    MainImage {      childImageSharp {        fluid {          ...GatsbyImageSharpFluid        }      }    }    }  }`export default ComponentName这是画廊组件，以防有帮助

Answer 1

根据文档，images prop应该是图像数组，因此应用于您的用例，images必须是对象图像数组。

假设您的查询按预期工作并检索正确的数据，您需要安装有效的对象数组以作为 images 传递prop。

import React from "react"

import { graphql, Link } from "gatsby"

import Image from "gatsby-image"

import ImageGallery from 'react-image-gallery';

const ComponentName = ({ data }) => {

  const {id, galleryImage} = data.home

  console.log('data is', data)

  

  const images = [];

  galleryImage.forEach(image=>{

    let yourImageObject={};

  

    yourImageObject.original=image.formats.large.childImageSharp.fluid;

  

    images.push(yourImageObject);

  });

  

return (

    <Layout>

    <section className="template">

    <ImageGallery items={images} />;

    </section>

    </Layout>

    )

}

export const query = graphql`

  query GetSingleHome($slug: String) {

    home: strapiHomes(slug: { eq: $slug }) {

    galleryImage {

      formats {

        large {

          childImageSharp {

            fluid {

              ...GatsbyImageSharpFluid

            }

            id

          }

        }

        small {

          childImageSharp {

            fluid {

              ...GatsbyImageSharpFluid

            }

            id

          }

        }

      }

    }

    MainImage {

      childImageSharp {

        fluid {

          ...GatsbyImageSharpFluid

        }

      }

    }

    }

  }

`

export default ComponentName

您可以简化代码，但我将其拆分以使其更具可读性和理解性。您需要循环遍历每个图像并为组件创建必需的数据ImageGallery：一个对象数组，original其中包含一个属性，...GatsbyImageSharpFluid其中包含片段。

如果此包无法与 Gatsby 图像一起使用，您可能需要稍微更改一下 GraphQL 查询和代码以适应它。

我不知道该依赖项的需求，但thumbnail如果需要，您也可以使用相同的方法添加该属性，添加：

    yourImageObject.thumbnail=image.formats.small.childImageSharp.fluid;