Gatsby：使用 GraphQL 查询从存储在 json 中的路径获取所有图像

Question

上下文

我正在尝试制作一个画廊。它应该从不同场合（例如博客）显示图像。

为此，我有一个JSON文件，其中存储了所有帖子（标题，slug，date和images-folder-path）。为了显示它们，我正在使用GraphQl。

问题

我现在的问题是显示各个帖子的所有图像。在JSON文件中，仅存储图像路径。

JSON结构：

[
 {
  "title": "Gallery 1",
  "slug": "gallery-1",
  "date": "02.01.2022",
  "images": "./gallery-1/"
 },
 {
  "title": "Gallery 2",
  "slug": "gallery-2",
  "date": "15.01.2022",
  "images": "./gallery-2/"
 }
]

现在，对于画廊1 ，我想将所有图像存储在/gallery-1/文件夹等中。

query MyQuery {
  allGalleriesJson {
    edges {
      node {
        title
        slug
        date
        images
      }
    }
  }
}

运行此GraphQl命令时，我会得到路径的字符串。但是现在，我想用此字符串将所有图像在文件夹中获取。我该如何实现？

Answer 1

我认为您想使用过滤器过滤器（非常冗余）以获取/Gallery-1/（或每个Gallery）文件夹中的所有图像。

为此，您只需要使用上下文在您的createPage函数中提供上下文变量。

createPage({
  path: node.slug,
  component: path.resolve(`./src/templates/your-template-file.js`),
  context: {
    slug: node.slug,
  },
})

注意：这是一个抽象，因为没有提供样板。根据您的意愿进行调整，但要为每个画廊对象传递slug的想法。

之后，在您的模板中（your-template-file.js） ）您需要使用提供的slug（每个页面不同）

export const query = graphql`
  query TemplateQuery($slug: String!) {
    allGalleriesJson(filter: {fileAbsolutePath: {eq: $slug  }}) {
      edges {
        node {
          title
          slug
          date
          images
        }
      }
    }

注意：Allgalleriesjson可能有所不同，或者您可能有> Galleriesjson可用。如果是这样，请使用它，指向特定节点的性能比所有这些节点都更具

性能=“ https://www.gatsbyjs.com/docs/query-filters/” rel =“ nofollow noreferrer”> https://www.gatsbyjs.com/docs/docs/query-filters/

，您可以使用绝对路径（fileabsolutepath）或相对。在graphiql Playground（localhost：8000/___ graphql）中测试您的查询。

尽管查询或摘要可能与此示例有所不同，但请获取想法：

• 为每个JSON对象位置创建页面（gatsby-node.js + createPage）
• 传递slug通过上下文中的模板变量
• 使用上下文来过滤allgalleriesjson获取您的文件夹图像