Gatsby markdown-remark-images 未显示答案

【问题标题】：Gatsby markdown-remark-images are not shownGatsby markdown-remark-images 未显示
【发布时间】：2021-02-03 15:23:32
【问题描述】：

我将 Gatsby 用于我的个人博客。我通过降价文件创建内容，这很有效 . 我想通过使用降价语法 ![My Image](./myImage.png) 在我的内容中包含图像。

myImage.png 与 .md 文件位于同一文件夹中：

我不知道为什么它不起作用。请问有人给我一个建议吗？

我用这些语法试过了：

![1](./myImage.png)
![2](./blog/Software/musiker-software/myImage.png)
![3](/blog/Software/musiker-software/myImage.png)
![4](myImage.png)
![5](/myImage.png)

这是我的文件结构

/content
  /blog
    /category
       /blogcontent
         article.md
         myImage.png

这是我的 gatsby-config.js 文件（顺序相同）：

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/content/blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
 {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-vscode`,
            options: {
              theme: {
                default: "Dark+ (default dark)",
              },
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-mdx`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              withWebp: true,
              showCaptions: true,
              quality: 100,
            },
          },
        ],
      },
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-embed-video",
            options: {
              width: 550,
              related: true,
              noIframeBorder: true,
              containerClass: "embedVideo-container"
            },
          },
        ],
      },
    },

这是 HTML 输出：

<img src="./myImage.png" alt="1">
<img src="./blog/Software/musiker-software/myImage.png" alt="2">
<img src="/blog/Software/musiker-software/myImage.png" alt="3">
<img src="myImage.png" alt="4">
<img src="/myImage.png" alt="5">

【问题讨论】：

标签： gatsby gatsby-image gatsby-remark-image

【解决方案1】：

好的，我明白了：

gatsby-transformer-remark 被声明了两次，所以下面的那个覆盖了上面的那个。我合并了这两个，所以现在它可以工作了：

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 1200,
        },
      },
      {
        resolve: `gatsby-remark-vscode`,
        options: {
          theme: {
            default: "Dark+ (default dark)",
          },
        },
      },
      {
        resolve: "gatsby-remark-embed-video",
        options: {
          width: 550,
          related: true,
          noIframeBorder: true,
          containerClass: "embedVideo-container"
        },
      },
    ],
  },
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-mdx`,

【讨论】：

【解决方案2】：

我不得不删除：gatsby-plugin-react-helmet

这是我创建项目时的 gatsby-config.js。

https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/

 System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Shell: 4.4.12 - /bin/bash
  Binaries:
    Node: 12.19.0 - /usr/bin/node
    npm: 6.14.8 - /usr/bin/npm
  Languages:
    Python: 2.7.13 - /usr/bin/python
  npmPackages:
    gatsby: ^2.31.1 => 2.32.0
    gatsby-image: ^2.5.0 => 2.11.0
    gatsby-plugin-manifest: ^2.6.1 => 2.12.0
    gatsby-plugin-offline: ^3.4.0 => 3.10.0
    gatsby-plugin-react-helmet: ^3.4.0 => 3.10.0
    gatsby-plugin-sharp: ^2.14.0 => 2.14.0
    gatsby-plugin-sitemap: ^2.11.0 => 2.12.0
    gatsby-remark-images: ^3.11.0 => 3.11.0
    gatsby-source-filesystem: ^2.10.0 => 2.11.0
    gatsby-transformer-remark: ^2.16.0 => 2.16.0
    gatsby-transformer-sharp: ^2.6.0 => 2.12.0
  npmGlobalPackages:
    gatsby-cli: 2.18.0

【讨论】：