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

- name: 图像1
  src: /path/to/image1.jpg
- name: 图像2
  src: /path/to/image2.jpg
- name: 图像3
  src: /path/to/image3.jpg

npm install gatsby-transformer-yaml

module.exports = {
  plugins: [
    'gatsby-transformer-yaml',
  ],
}

import React from 'react'
import { graphql } from 'gatsby'

const ImageListPage = ({ data }) => {
  const images = data.allYaml.nodes

  return (
    <div>
      {images.map(image => (
        <div key={image.name}>
          <h2>{image.name}</h2>
          <img src={image.src} alt={image.name} />
        </div>
      ))}
    </div>
  )
}

export const query = graphql`
  query {
    allYaml {
      nodes {
        name
        src
      }
    }
  }
`

export default ImageListPage