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

在阅读 official how-to guide 并将 gatsby-remark-image 添加为插件数组中的单个条目后，我遇到了同样的问题。仅将其保留在 gatsby-plugin-mdx 内为我解决了这个问题。

Answer 2

我认为您需要将图片引用为以./开头的相对路径，例如![alt](./image.jpg)

文档中没有特别明确的说明，但在https://www.gatsbyjs.org/packages/gatsby-remark-images/#usage-in-markdown

中提到了

Answer 3

我通过在我的博客帖子mdx frontmatter中添加图片数组来解决此问题，例如images: [formby-golf-club.jpg, myFirstTweet.PNG]。

然后在我的帖子模板中，通过graphQL捕获数组中图像的publicURL，然后将它们传递到MDXRenderer中，就像这样：<MDXRenderer images={data.mdx.frontmatter.images}>。

然后我可以像下面这样访问mdx文件中的images数组：<img src={props.images[0].publicURL} style={{ width: "100%" }} />

无法在Gatsby中将图像添加到mdx文件

3 个答案: