如何使用GatsbyJS编写从mdx文件中获取图像的GraphQL查询？

---
title: 示例
featuredImage: ./path/to/image.jpg
---

这是一个示例页面。

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx"],
        defaultLayouts: {
          default: require.resolve("./src/components/layout.js"),
        },
      },
    },
  ],
}

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

const ExamplePage = ({ data }) => {
  const { mdx } = data

  return (
    <div>
      <h1>{mdx.frontmatter.title}</h1>
      <img src={mdx.frontmatter.featuredImage} alt="Featured" />
      <div>{mdx.body}</div>
    </div>
  )
}

export const query = graphql`
  query($slug: String!) {
    mdx(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        title
        featuredImage
      }
      body
    }
  }
`

export default ExamplePage