盖茨比:如何显示yaml文件中指定的图像列表



我使用当前版本的盖茨比(2.x),并希望使用盖茨比图像来渲染产品的画廊。

我有几个产品的 YAML 文件。我已经可以使用这些文件的文本内容创建页面,但我还想添加一个带有.yaml文件中指定的图像的小图库。

示例 YAML 文件如下所示:

product: "Some product"
description: "It is really awesome!"
screenshots:
  - /img/product1/screenshot1.jpg
  - /img/product1/screenshot2.jpg
  - /img/product1/screenshot3.jpg

我现在的问题是我只能将屏幕截图作为字符串获取,但我不知道如何将它们传递给进行渲染。

我想创建一个采用文件名并使用查询来获取图像数据的组件 - 但它不能接受任何参数,因为它只能使用静态查询。

我也没有找到将结果从第一个 graphql 查询传递到第二个图像数据的方法。

如果您安装了 gatsby-transformer-sharp 和 gatsby-plugin-sharp 并使用正确的路径访问您的图像,Gatsby 将自动拾取它们并通过 sharp,因此您可以查询这些图像。你可以看看我的一个网站,它也使用了一个带有图像路径的YML文件,然后我将其与gatsby-image一起使用:https://github.com/LekoArts/gatsby-starter-portfolio/blob/master/src/sites/sites.yaml

最新更新