如何在图片与Markdown文件不同目录时使用gatsby-remark-images

我用Gatsby搭建基于Markdown的博客，当附件和Markdown文件同目录时（如下结构），gatsby-transformer-remark和gatsby-remark-images能正常工作：

+-- content
|  +-- blog
|  |   +-- article_title
|  |   |   +-- article_title.md
|  |   |   +-- photo.png

但我想把所有附件移到单独的media文件夹，适配Obsidian这类笔记工具，期望结构如下：

+-- content
|  +-- blog
|  |   +-- media
|  |   |   +-- photo_1.png
|  |   |   +-- photo_2.png
|  |   |   +-- photo_3.png
|  |   +-- article_1.md
|  |   +-- article_2.md

文章里的图片链接用两种方式：

![This will be inserted in the alt attribute](photo1.png)
![This will be inserted in the alt attribute](./media/photo1.png)

现在找不到实现方法，我的Gatsby配置文件如下：

module.exports = {
  siteMetadata: {
    title: ``,
    description: ``,
    siteUrl: ``,
  },
  plugins: [
    "gatsby-plugin-postcss",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "media",
        path: `${__dirname}/content/blog/media`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: `${__dirname}/content`,
        ignore: [`**/\.*`], // ignore files starting with a dot
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-mathjax`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
  ],
}

要实现期望的文件夹结构并让图片正常解析，需要调整Gatsby配置和路径匹配规则，分三步操作：

1. 修正gatsby-source-filesystem的路径配置 #

将posts的路径指向content/blog，同时忽略media文件夹，避免媒体文件被误当作Markdown处理：

{
  resolve: "gatsby-source-filesystem",
  options: {
    name: "posts",
    path: `${__dirname}/content/blog`, // 修改为blog目录
    ignore: [`**/\.*`, `**/media/**`], // 新增忽略media文件夹规则
  },
}

2. 添加并配置文件拷贝插件 #

安装gatsby-remark-copy-linked-files插件，它能自动识别Markdown里的图片链接，将对应文件拷贝到静态资源目录：

npm install gatsby-remark-copy-linked-files

然后在gatsby-transformer-remark的插件列表中添加该插件，放在gatsby-remark-images之前：

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      `gatsby-remark-mathjax`,
      {
        resolve: `gatsby-remark-copy-linked-files`,
        options: {
          destinationDir: `static/media`, // 指定拷贝后的存储目录
          ignoreFileExtensions: [`md`], // 忽略Markdown文件
        },
      },
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 590,
          staticFolders: [`${__dirname}/content/blog/media`], // 指定媒体文件根目录
        },
      },
      // 其他原有插件...
    ],
  },
}

3. 兼容两种图片链接格式 #

上述配置完成后，不管你用(photo1.png)还是(./media/photo1.png)的链接格式，插件都会自动匹配media文件夹里的图片，处理后生成优化后的图片链接。

内容的提问来源于stack exchange，提问作者Sarfo