How to embed images in frontmatter with gatsby-plugin-mdx v4?

Question

A while back I followed this tutorial to implement image embeds in MDX posts. See this query on Stack Overflow for context as well.

A v3 example template using this:

/*  Post.jsx @ gatsby-plugin-mdx v3 */
import React from "react"
import { graphql } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "@layouts/Layout"
import { postContainer } from "@modules/Post.module.scss"

export default function DefaultPostTemplate({ data, location }) {
  const post = data.mdx

  return (
    <Layout location={location} title={post.frontmatter.title} description={post.frontmatter.lead}>
      <article className={postContainer}>
        <MDXRenderer thumbnail={post.frontmatter.thumbnail} embedded={post.frontmatter.embedded}>
      {post.body}
    </MDXRenderer>
      </article>
    </Layout>
  )
}

export const data = graphql`
  query ($id: String!) {
    mdx(id: { eq: $id }) {
      id
      body
      frontmatter {
        key
        title
        computerDate: date(formatString: "YYYY-MM-DD")
        humanDate: date(formatString: "D. MMMM YYYY", locale: "nn")
        enHumanDate: date(formatString: "MMMM D, YYYY", locale: "en")
        lead
        label
        subtitle
        embedded {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
`

As you can see, I passed the embedded property to the MDXProvider component.

However, with the gatsby-plugin-mdx v4 setup, I'm not sure how to do this—

/*  Post.jsx @ gatsby-plugin-mdx v4 */
import React from "react"
import { graphql } from "gatsby"
import Layout from "@layouts/Layout"
import { postContainer } from "@modules/Post.module.scss"

export default function DefaultPostTemplate({ data, children }) {
  const post = data.mdx

  return (
    <Layout title={post.frontmatter.title} description={post.frontmatter.lead}>
      <article className={postContainer}>
        {children}
      </article>
    </Layout>
  )
}

export const data = graphql`
  query ($id: String!) {
    mdx(id: { eq: $id }) {
      frontmatter {
        key
        title
        computerDate: date(formatString: "YYYY-MM-DD")
        humanDate: date(formatString: "D. MMMM YYYY", locale: "nn")
        lead
        label
        subtitle
        embedded {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
`

How can I embed images as frontmatter with the new setup?

Answer 1

I've also been struggling with this since v4. Here's what I found:

The graphql query result in your template file is accessible from within the MDX file via props.data.mdx

So in your case you could use GatsbyImage inside your mdx to render your image as follows (make sure this is placed below your frontmatter)

import { getImage, GatsbyImage } from "gatsby-plugin-image";

<GatsbyImage
  alt="alt text"
  image={getImage(props.data.mdx.frontmatter.embedded)}/>