如何结合gatsby-remark-component与gatsby-remark-images处理自定义组件图片路径？

我之前也碰到过这个头疼的问题——想结合两个插件的优势，却卡在了图片路径无法被解析的环节。下面分享几个亲测有效的方案，你可以根据自己的项目情况选择：

方案一：用标准Markdown图片语法+自定义Remark插件 #

这个思路是先让gatsby-remark-images处理原生图片路径，再把处理后的图片转换成你的自定义布局组件，核心是调整插件执行顺序和扩展Remark的处理逻辑：

1. 修改Markdown写法：用标准图片语法加上自定义对齐标记，比如：

![Some alt text](foo.png "Some caption"){.align-center}

这里的.align-center是我们自定义的类名，用来标记对齐方式。

2. 编写自定义Remark插件：写一个简单的插件，识别带自定义类名的图片节点，把它转换成你的<Container>组件。示例代码大概是这样的：

// src/plugins/remark-custom-image.js
const visit = require('unist-util-visit');

module.exports = () => (tree) => {
  visit(tree, 'image', (node) => {
    // 提取对齐类名（假设我们用{.align-xxx}的格式）
    const alignMatch = node.title?.match(/\{.align-(\w+)\}/);
    let caption = node.title;
    let align = 'left'; // 默认对齐

    if (alignMatch) {
      align = alignMatch[1];
      caption = caption.replace(alignMatch[0], '').trim();
    }

    // 替换成JSX组件节点
    node.type = 'jsx';
    node.value = `<Container align="${align}">
      <img src="${node.url}" alt="${node.alt}" title="${caption}" />
      ${caption ? `<Caption>${caption}</Caption>` : ''}
    </Container>`;
  });
};

3. 调整gatsby-config.js的插件顺序：确保gatsby-remark-images先执行，再加载你的自定义插件，这样图片路径已经被优化过了：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-images`, // 先处理图片路径
          require.resolve('./src/plugins/remark-custom-image'), // 再转换为自定义组件
        ],
      },
    },
  ],
};

方案二：切换到MDX+Gatsby Plugin Image #

如果你的项目可以切换到MDX（推荐，灵活性更高），可以直接抛弃gatsby-remark-images，改用gatsby-plugin-image来处理图片，同时直接在MDX里使用自定义组件：

1. 安装依赖：

npm install gatsby-plugin-mdx @mdx-js/react gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

2. 创建自定义Image组件：

// src/components/MyImage.js
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { useStaticQuery, graphql } from 'gatsby';

const MyImage = ({ src, alt, caption, align }) => {
  // 查询图片数据
  const data = useStaticQuery(graphql`
    query {
      allFile(filter: { extension: { in: ["png", "jpg", "jpeg"] } }) {
        nodes {
          relativePath
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  `);

  const image = data.allFile.nodes.find(node => node.relativePath === src)?.childImageSharp?.gatsbyImageData;

  if (!image) return null;

  return (
    <div style={{ textAlign: align, margin: '1rem 0' }}>
      <GatsbyImage image={image} alt={alt} />
      {caption && <p style={{ fontSize: '0.9rem', color: '#666' }}>{caption}</p>}
    </div>
  );
};

export default MyImage;

3. 在MDX里直接使用：

import MyImage from '../components/MyImage';

<MyImage src="foo.png" alt="Some alt text" caption="Some caption" align="center" />

这种方式更直观，而且gatsby-plugin-image的图片优化能力比gatsby-remark-images更强，还支持懒加载、WebP等特性。

为什么原来的方法不行？ #

gatsby-remark-images是在Remark解析Markdown的早期阶段工作的，它只会识别原生的<img>标签或者Markdown图片语法，然后替换成优化后的图片路径。而gatsby-remark-component是把Markdown里的<img>转换成JSX组件，这个转换如果发生在gatsby-remark-images之后，那JSX组件里的src就不会被处理；如果转换发生在之前，gatsby-remark-images又识别不了JSX组件里的src属性——这就是核心矛盾所在。

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