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

2023年8月30日 211次阅读

我目前正在学习Gatsby.js和GraphQL作为补充技术,并且一直坚持查询.我想查询文件夹中的所有图像,通过它们映射并将它们作为网格显示在反应组件中.我正在使用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中有我的图像

谢谢你的帮助！

最佳答案 您可以使用graphql中的过滤器选择特定文件夹.

尝试这样的事情：

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

其中,当您转到GraphiQL并在allFile上运行查询时,应将eq：photos更改为您想要定位的文件的相对目录结果.

点赞