Graphql 盖茨比,在嵌套目录中加载图像
我正在和盖茨比一起创建一个投资组合,我想用盖茨比的形象来优化它,但我被卡住了 我有一个Graphql 盖茨比,在嵌套目录中加载图像,graphql,gatsby,gatsby-image,Graphql,Gatsby,Gatsby Image,我正在和盖茨比一起创建一个投资组合,我想用盖茨比的形象来优化它,但我被卡住了 我有一个projects目录,其中每个项目都有一个单独的目录,每个目录中都有该项目的图像。像这样: images |_ project1 | |_ image1.png | |_ image2.png | |_ ... | |_ project2 | |_ image1.png | |_ imag
projects
目录,其中每个项目都有一个单独的目录,每个目录中都有该项目的图像。像这样:
images
|_ project1
| |_ image1.png
| |_ image2.png
| |_ ...
|
|_ project2
| |_ image1.png
| |_ image2.png
| |_ ...
|
|_ ...
首先,在主页上,我想显示所有项目的图库,这意味着我需要获取每个目录的第一个图像(用作缩略图),并以如下或类似的格式访问它:
{
"project1": [some image object],
"project2": [some image object],
"project3": [some image object],
...
}
然后当用户单击每个项目时,我需要弹出一个旋转木马,向他们显示该项目的其余图像
因此,总的来说,我需要能够以分层顺序访问图像,或者能够在graphql查询中使用变量。你可能会认为这是非常直接和简单的!但两者都不可能。所以我被卡住了
如果有帮助的话,我还可以选择将图像路径放在json文件中(我已经从json加载了我的内容)。大概是这样的:
{
project1: {
/* other project's data */,
images: [
"/projects/project1/image1.png",
"/projects/project1/image2.png",
...
]
},
project2: {
/* other project's data */,
images: [
"/projects/project2/image1.png",
"/projects/project2/image2.png",
...
]
},
...
}
那么请告诉我应该如何使用盖茨比和盖茨比图像来实现这个组合?