在 Markdown 的数组上使用 Gatsby-image答案

【问题标题】：Using Gatsby-image on array from markdown在 Markdown 的数组上使用 Gatsby-image
【发布时间】：2019-09-24 01:32:56
【问题描述】：

我正在使用 Gatsby，并且在数组中的每个降价文件中都引用了图像。我希望能够使用 Gatsby-image 来转换这些图像，但不能让它与数组一起使用。

在使用 markdown 中的单个图像时，我可以让它工作

我有这个查询来获取数据：

query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        id
        category
        title
        path
        prices
        salePercent
        images
      }
    }
  }

我有这个来自降价

mainImage: './images/1.jpg'

images: ['1', '2', '3', '4', '5', '6']

我可以让 gatsby-image 与 mainImage 一起正常工作，但无法让查询与数组一起工作。

我希望能够让 gatsby-image 与数组一起工作并转换每个图像。

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

你可以像这样在 frontmatter 中使用 YAML 格式：

images:
- image: "home-DSC_0035.jpeg"
  image_alt: "beautiful photo"
- image: "home-DSC_0045.jpg"
  image_alt: "This is better"
- image: "home-DSC_0043.jpg"
  image_alt: "This is much better"

你会得到数组。

【讨论】：

您好，感谢您的回复。我现在实际上已经解决了这个问题。是我太笨了。我只需要在数组中引用实际的图像路径和名称，效果就很好。感谢您的宝贵时间。