如何在Gatsby中使用带有富文本的内联图像？

import React from "react"
import { graphql } from "gatsby"
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
import Img from "gatsby-image"

const RichTextPage = ({ data }) => {
  const { contentfulPage } = data
  const options = {
    renderNode: {
      "embedded-asset-block": node => {
        const { title, file } = node.data.target.fields
        const imageUrl = file["en-US"].url
        const imageAlt = title["en-US"]
        return <Img fluid={imageUrl} alt={imageAlt} />
      },
    },
  }

  return (
    <div>
      <h1>{contentfulPage.title}</h1>
      {documentToReactComponents(contentfulPage.content.json, options)}
    </div>
  )
}

export const query = graphql`
  query($slug: String!) {
    contentfulPage(slug: { eq: $slug }) {
      title
      content {
        json
      }
    }
  }
`

export default RichTextPage