Gatsby GraphQL正则表达式查询多个图像 [英] Gatsby GraphQL Regex Query Multiple Images

问题描述

我想从多个博客帖子中在盖茨比中查询图像.每个文件的命名都由以下方式组成.

I have images that I want to query for in Gatsby from multiple blog posts. The file naming for each is composed of the following manner.

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

我只想选择名称中包含preview.jpg的图像，但我想选择其中的全部 ，并在以后循环浏览.目前，我有一个graphql查询，它使用正则表达式仅选择其中之一.

I want to select only the image that contain-preview.jpg in their name, but I want to select all of them and loop through at a later point. Currently I have a graphql query that selects only one of them using regex.

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

但是，这只会返回名称中包含 preview.jpg 的图像之一.在上面的示例中，它将返回blog-post3-preview.jpg，但不会返回1或2.我如何才能全部返回3个?

However, this only returns one of the images that contain preview.jpg in their name. In the example above, it would return blog-post3-preview.jpg but not 1 or 2. How can I have all 3 be returned?

推荐答案

我找到了解决方案，我的原始正则表达式工作正常.但是，我需要使用不同于file()的其他查询路径，因为这似乎只返回文件系统中的一个节点.

I've found the solution, my original regex worked fine. However, I needed to use a different query path other than file() as this only returns one node in the file system it seems.

这是对我有用的查询.

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

我在在这里找到解决方案带有盖茨比图像的图像?

这篇关于Gatsby GraphQL正则表达式查询多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！