Gatsby：如何显示 yaml 文件中指定的图像列表？答案

【问题标题】：Gatsby: How to display a list of images specified in a yaml file?Gatsby：如何显示 yaml 文件中指定的图像列表？
【发布时间】：2019-06-12 23:28:51
【问题描述】：

我使用当前版本的 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 查询的结果传递给第二个用于图像数据的方法。

【问题讨论】：

标签： graphql gatsby

【解决方案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

【讨论】：

谢谢 - 这真的很有帮助。问题是相对路径错误：屏幕截图显示为字符串。修复路径后，它们现在是文件，并且具有以前丢失的 childImageSharp。