使用 GraphQL 查询文件夹中的所有图像 [英] Querying all images in folder using GraphQL

问题描述

我目前正在学习 Gatsby.js 和 GraphQL 作为补充技术，但在查询方面陷入了困境.我想从文件夹中查询所有图像，通过它们映射并在反应组件中将它们显示为网格.我正在使用 gatsby-source-filesystem，但不知道如何具体解决该文件夹并从中获取所有图像.

I am currently learning Gatsby.js and GraphQL as a supplementary technology and got stuck with querying. I want to query all images from a folder, map trough them and display them in a react component as a grid. I am using gatsby-source-filesystem but can't figure out, how to address specifically that folder and get all images from it.

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

My plugin set up for source-filesystem looks like this.

{
  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

I have my images in src/assets/photos

感谢您的帮助！

推荐答案

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

You can select specific folders using filters in graphql.

试试这样:

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

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

Where eq: photos should be changed to the relative directory result you get for the files you want to target when you go to GraphiQL and run a query on allFile.

这篇关于使用 GraphQL 查询文件夹中的所有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！