Невозможно добавить изображения в файл MDX в Gatsby

Question

Я пытаюсь импортировать изображение в файл MDX, выполнив следующие действия: ![alt](image.jpg). Мой файл mdx и изображение хранятся в каталоге src, posts, post-1. Однако изображение не отображается. Я безуспешно пробовал множество путей к файлам.

Единственный способ получить изображения для отображения - использовать src, например. ![alt](/static/47d93fd9bdeaaf54a7b60d14c66abe5d/48e00/icon.jpg)

Ниже часть моего gatsby.config

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `post-featured`,
        path: `${__dirname}/src/post-featured/`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        root: __dirname,
        extensions: [".md", ".mdx"],
        gatsbyRemarkPlugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 800,
              quality: 70,
            },
          },
        ],
      },
    },

Answer 1

Я думаю, вам нужно ссылаться на изображения как относительный путь, начиная с ./, например ![alt](./image.jpg)

Это не особенно ясно в документации, но упоминается в https://www.gatsbyjs.org/packages/gatsby-remark-images/

Answer 2

У меня была такая же проблема после прочтения официального руководства и добавления gatsby-remark-imageкак отдельная запись в массиве плагинов. Сохраняя это только внутри gatsby-plugin-mdx решил проблему для меня.

Answer 3

Я решил эту проблему, добавив массив изображений в свой пост в блоге mdx frontmatter, например. images: [formby-golf-club.jpg, myFirstTweet.PNG].

Затем в моем шаблоне сообщения я беру publicURL изображений в массиве через graphQL и передаю их в MDXRenderer, например: <MDXRenderer images={data.mdx.frontmatter.images}>.

Затем я могу получить доступ к массиву изображений в моем файле mdx следующим образом: <img src={props.images[0].publicURL} style={{ width: "100%" }} />