Javascript 在带有gatsby插件页面创建者的mdx文件中使用gatsby图像

对于我的盖茨比项目，我使用Mdx和盖茨比插件页面创建者来创建我的页面，而不使用特定于模板的查询

大多数页面的顶部都有一个图像，所以我想通过mdx（frontmatter？）添加它

我尝试过盖茨比评论图片的方式，但问题是它只在“html”中起作用。目标是添加独立于“html”的图像，这样我就可以在（pageContext.frontmatter？）端使用清晰的图像

//gatsby-config.js
{
解析：“盖茨比插件页面创建者”，
选项：{
路径：`${uu dirname}/src/data/mdx`，
},
},
{
解析：“盖茨比插件mdx”，
选项：{
默认布局：{
默认值：require.resolve（“./src/templates/mdx.js”），
},
盖茨比马克插件：[
{
决议：`盖茨比评论图像'，
选项：{
//指定的最大宽度（以像素为单位）很重要
//作为此插件的内容容器使用此作为
//用于生成每个图像的不同宽度的基础。
最大宽度：992，
背景色：“透明”，
withWebp：没错，
},
},
]
},
},
//示例-page.md
---
excludeFromNav:false
excludeFromFooterNav:false
姓名：联系人
图片：./logo.jpg
---
从“../../components/Maps”导入贴图；
//mdx.js
导出默认值（{children，data，…props}）=>{
log（'RENERING mdx.js'，数据，道具）；
返回(
{儿童}
)
};

在

mdx.js

文件a have my

frontmatter

中，它有一个图像，但图像不清晰

有没有办法通过mdx创建清晰的图像？有没有办法让一个从未想过的人做得更好

先走一步

---

Joost

在您的页面中，如果您希望从frontmatter显示图像，您将如何加载图像？i、 e.您是否通过graphql查询获取图像？如果是这样，那么该查询看起来是什么样子的？在您希望显示frontmatter图像的页面中，您是如何加载图像的？i、 e.您是否通过graphql查询获取图像？如果是，那么这个查询是什么样子的？

// 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>
  )
};