Gatsby GraphQL Regex 查询多个图像答案

【问题标题】：Gatsby GraphQL Regex Query Multiple ImagesGatsby GraphQL Regex 查询多个图像
【发布时间】：2021-05-29 23:46:44
【问题描述】：

我想从多篇博文中查询 Gatsby 中的图像。每个文件的命名由以下方式组成。

blog-post1-preview.jpg
blog-post2-preview.jpg
blog-post3-preview.jpg
blog-post1.jpg

我只想选择名称中包含-preview.jpg 的图像，但我想选择所有并稍后循环播放。目前我有一个 graphql 查询，它使用正则表达式只选择其中一个。

query MyQuery {
  file(absolutePath: {regex: "/preview.jpg$/"}) {
    childrenImageSharp {
      fluid {
        originalName
      }
    }
  }
}

但是，这只返回名称中包含 preview.jpg 的图像之一。在上面的示例中，它将返回 blog-post3-preview.jpg，但不会返回 1 或 2。我怎样才能返回所有 3？

【问题讨论】：

标签： regex graphql gatsby gatsby-image

【解决方案1】：

我找到了解决方案，我原来的正则表达式运行良好。但是，我需要使用 file() 以外的其他查询路径，因为这似乎只返回文件系统中的一个节点。

这是对我有用的查询。

query MyQuery {
  allImageSharp(filter: {fluid: {originalName: {regex: "/preview.jpg$/"}}}) {
    edges {
      node {
        fluid {
          originalName
          originalImg
        }
      }
    }
  }
}

我在How do I query multiple images with gatsby-image?找到了解决方案

【讨论】：