0

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

例如我有这个：

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

文件位于文件夹 /src/images

我想使用盖茨比图像进行优化

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

谢谢。

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

4

1 回答 1

2

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

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

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

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

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

这将使您的图像可以通过 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
            }
          }
        }
      }    
    }
`;

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

于 2020-06-23T13:54:27.673 回答