使用GraphQL查询文件夹中的所有图像

小编典典

使用GraphQL查询文件夹中的所有图像

reactjs

我目前正在学习Gatsby.js和GraphQL作为补充技术，并被查询所困扰。我想查询一个文件夹中的所有图像，将它们映射成槽并将它们显示在网格中的react组件中。我正在使用gatsby-
source-filesystem，但无法弄清楚如何专门解决该文件夹并从中获取所有图像。

我为源文件系统设置的插件如下所示。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/posts`,
    name: 'posts',
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/assets/images`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `photos`,
    path: `${__dirname}/src/assets/photos`,
  },
},

我的图片在src / assets / photos中

谢谢你的帮助！

阅读 300

2020-07-22

共1个答案

小编典典

您可以使用graphql中的过滤器选择特定的文件夹。

尝试这样的事情：

query AssetsPhotos {
  allFile(filter: {extension: {regex: "/(jpg)|(jpeg)|(png)/"}, relativeDirectory: {eq: "photos"}}) {
    edges {
      node {
        id
        name
      }
    }
  }
}

eq: photos当您转到GraphiQL并在上运行查询时，应在何处更改为要获取的目标文件的相对目录结果allFile。

2020-07-22