Использование gatsby-image в mdx файле с помощью gatsby-plugin-page-creator

Question

Для моего проекта gatsby я использую Mdx с gatsby-plugin-page-creator для создания моих страниц без специального запроса шаблона.

У большинства страниц есть изображение в верхней части страницы, поэтому я хочу добавить его через mdx (frontmatter?).

Я пробовал использовать метод gatsby-comment-images, но проблема в том, что он работает только в "html". Цель состоит в том, чтобы добавить изображение отдельно от "html", чтобы я мог использовать резкое изображение на стороне (pageContext.frontmatter?).

// gatsby-config.js
{
      resolve: "gatsby-plugin-page-creator",
      options: {
        path: `${__dirname}/src/data/mdx`,
      },
    },
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve("./src/templates/mdx.js"),
        },
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 992,
              backgroundColor: 'transparent',
              withWebp: true,
            },
          },
        ]
      },

    },


// example-page.md

---
excludeFromNav: false
excludeFromFooterNav: false
name: Contact
image: ./logo.jpg
---

import Maps from '../../components/maps';

<Maps />


// mdx.js
export default ({ children, data, ...props }) => {
  console.log('RENERING mdx.js', data, props);
  return (
    <Layout>
      {children}   
    </Layout>
  )
};

в mdx.js файл есть мой frontmatter, есть изображение, но оно нечеткое.

Есть ли способ создавать четкие изображения с помощью MDX? Есть ли способы, о которых не думали, может работать лучше?

Спасибо заранее!

Joost