Gatsby Remark Images行内图片src未重写为正确静态链接问题排查求助

1. 调整插件加载顺序 #

你当前配置中gatsby-transformer-remark的注册顺序早于所有markdown相关的gatsby-source-filesystem配置，Gatsby插件从上到下执行，必须先让Gatsby识别到markdown源文件，再用transformer处理。把所有gatsby-source-filesystem的配置项整体移到gatsby-transformer-remark的上方即可。

2. 补全gatsby-remark-images配置 #

新增兼容参数，避免默认值适配问题：

{
  resolve: "gatsby-remark-images",
  options: {
    maxWidth: 1200,
    withWebp: true,
    linkImagesToOriginal: false,
    quality: 80,
  }
}

3. 排查markdown渲染逻辑 #

确认你在页面组件中查询markdown数据时，使用的是markdownRemark.html字段输出内容，不要自行调用remark库重新解析markdown正文，自定义解析逻辑会覆盖掉gatsby-transformer-remark已经替换好的正确图片路径。

4. 清除缓存重启服务 #

执行以下命令清理Gatsby缓存后重启开发服务，避免旧缓存导致配置不生效：

gatsby clean && gatsby develop

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