如何在用于gatsbyjs的yaml中包含gif？

- title: My GIF
  gif: /path/to/my-gif.gif

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

const MyPage = ({ data }) => {
  const gifs = data.allYaml.nodes

  return (
    <div>
      {gifs.map(gif => (
        <div key={gif.title}>
          <h2>{gif.title}</h2>
          <img src={gif.gif} alt={gif.title} />
        </div>
      ))}
    </div>
  )
}

export const query = graphql`
  query {
    allYaml {
      nodes {
        title
        gif
      }
    }
  }
`

export default MyPage