graphql - 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 来实现这个投资组合？

标签： graphqlgatsbygatsby-image