如何将 gatsby-image 与对象数组一起使用？答案

【问题标题】：How do I use gatsby-image with an Array of Objects?如何将 gatsby-image 与对象数组一起使用？
【发布时间】：2020-10-13 10:25:17
【问题描述】：

如何将 gatsby-image 与对象数组一起使用？

例如我有这个：

const dataImgs = [
  { id: 1, title: "Astronaut", img: "gatsby-astronaut.png" },
  { id: 2, title: "Icon", img: "gatsby-icon.png" }
]

文件在文件夹/src/images中

我想使用 Gatsby Image 进行优化

我的问题是我不明白如何进行 GraphQL 查询。我从一个对象获取文件名，我想加入 GraphQL 查询中的路径。

谢谢。

这是一个代码框，可以帮助您更好地了解我想要做什么 https://codesandbox.io/s/summer-hooks-im9q7?file=/src/components/image.js

【问题讨论】：

标签： graphql javascript-objects gatsby gatsby-image

【解决方案1】：

这里有很多实现。我将尝试一步一步地解释它。

需要提供一定数量的数据才能使用gatsby-image，然后循环遍历。

首先，您需要通过添加（在您的gatsby-config.js 中）来设置您的 Gatsby 文件系统：

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

注意：您可能需要安装插件。更多信息here。

这将使您的图像可通过 GraphQL 查询，并将所有 gatsby-image 潜力扩展到它们。

下一步是使用您提供的 GraphQL 片段查询图像并检索所有需要的信息。该查询与您的项目结构相关，但应如下所示：

{
  allImageSharp {
    edges {
      node {
        fluid(maxWidth: 800) {
          aspectRatio
          src
          srcSet
          sizes
          originalImg
          originalName
        }
      }
    }
  }
}

注意，这等于使用片段：

{
  allImageSharp {
    edges {
      node {
        fluid(maxWidth: 800) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

最后一步是遍历您的对象，该对象在任何页面/组件中都应存储在props.data 中。比如：

const yourComponent= ({ data }) => {

  return <Layout>
    {data.edges.map(({ node })=> <Img fluid={node.childImageSharp.fluid} />)}
  </Layout>;
};

export default yourComponent;

export const yourComponentData= graphql`
    query getArticleInformation  {
     allImageSharp {
        edges {
          node {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }    
    }
`;

根据您检索到的值，循环对象的内部结构可能会有很大差异，但想法是这样的。

【讨论】：