微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Gatsby GraphQL 正则表达式查询多个图像

如何解决Gatsby GraphQL 正则表达式查询多个图像

我想在 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 个?

解决方法

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

这是对我有用的查询。

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

我在 How do I query multiple images with gatsby-image?

找到了解决方案

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。