Question

我使用的是Gatsby（2.x）的当前版本，并希望使用gatsby-image渲染产品的图片库。

我有几个用于产品的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查询的结果传递给第二个图像数据的方法。

Answer 1

如果安装gatsby-transformer-sharp和gatsby-plugin-sharp并使用正确的图像路径，则Gatsby将自动拾取图像并将其通过Sharp管道传输，因此您可以查询这些图像。您可以看一看我的一个站点，该站点还使用YML文件以及图像路径，然后将其与gatsby-image一起使用：https://github.com/LekoArts/gatsby-starter-portfolio/blob/master/src/sites/sites.yaml

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

1 个答案: