Использование gatsby-image в файле mdx с gatsby-plugin-page-creator - PullRequest
Новая
       14

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

1 голос
/ 30 октября 2019

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

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

Я пробовал способ gatsby -mark-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

...