在markdown中的数组上使用Gatsby-image

npm install gatsby-image

---
title: My Post
images:
  - /path/to/image1.jpg
  - /path/to/image2.jpg
  - /path/to/image3.jpg
---

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

const MyPage = ({ data }) => {
  const images = data.markdownRemark.frontmatter.images

  return (
    <div>
      {images.map((image, index) => (
        <Img key={index} fluid={image.childImageSharp.fluid} alt={`Image ${index}`} />
      ))}
    </div>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        images {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

export default MyPage