使用GraphQL查询文件夹中的所有图像 [英] Querying all images in folder using GraphQL
问题描述
我目前正在学习Gatsby.js和GraphQL作为补充技术,并且陷入了查询困境.我想查询一个文件夹中的所有图像,将它们映射成槽并将它们显示在网格中的react组件中.我正在使用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
}
}
}
}
在将eq: photos
更改为相对目录结果的位置,该结果是您访问GraphiQL并在allFile
上运行查询时获得要定位的文件的结果.
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屋!