Gatsby，在嵌套目录中加载图像

Question

我正在使用Gatsby创建投资组合，我想使用gatsby-image进行优化，但是我遇到了麻烦。

我有一个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",
            ...
        ]
    },
    ...
}

所以请告诉我应该如何使用Gatsby和gatsby-image来实现这一投资组合？