1

对于我的 gatsby 项目，我使用 Mdx 和 gatsby-plugin-page-creator 来创建我的页面，而不需要模板特定的查询。

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

我已经尝试过 gatsby-remark-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文件 a have myfrontmatter中，它有一个图像，但图像不清晰。

有没有办法通过 mdx 创建清晰的图像？有没有想过可能会更好的方法？

提前谢谢！

约斯特

4

0 回答 0