Question

如何将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

Answer 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
            }
          }
        }
      }    
    }
`;

循环对象的内部结构可能会有所不同，具体取决于您获取的值，但这就是这个主意。

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

1 个答案: