咨询：Gridsome如何处理Markdown文件中的外部图片URL？

嘿，这个问题问得很到位！我在几个Gridsome项目里折腾过图片处理这块，刚好能给你讲明白：

默认行为：直接用外部URL渲染 #

Gridsome对Markdown里的外部图片（比如 ![示例图](https://external-site.com/photo.jpg) 这种写法），默认完全不会主动下载到本地。它会原封不动把这个外部URL塞进最终生成的HTML里，等用户打开页面时，浏览器直接从外部服务器拉取这张图。

为啥这么设计？其实挺合理的——随便抓外部资源可能踩版权坑，也可能额外消耗带宽，而且有些外部图可能有访问限制，Gridsome不会自作主张替你做这个决定。

想让Gridsome下载外部图？得靠插件配置 #

如果你希望把外部图片本地化（比如怕外链挂了、想优化加载速度），就得借助Gridsome的插件生态来实现。最常用的组合是@gridsome/transformer-remark搭配gridsome-plugin-remark-external-images插件。

具体步骤给你列出来：

1. 先装插件：

npm install @gridsome/transformer-remark gridsome-plugin-remark-external-images --save-dev

2. 在gridsome.config.js里配置Transformer和插件参数：

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: './content/**/*.md', // 你的Markdown文件路径
        typeName: 'Post'
      }
    }
  ],
  transformers: {
    remark: {
      plugins: [
        [
          'gridsome-plugin-remark-external-images',
          {
            destination: './src/assets/images/external', // 下载后图片存这里
            useFileName: true, // 保留原文件名，也可以设为false生成哈希名
            maxWidth: 1200 // 可选：超过这个宽度会自动压缩
          }
        ]
      ]
    }
  }
}

配置完重启gridsome develop或者执行gridsome build，Gridsome就会自动把Markdown里的外部图下载到指定目录，同时把原Markdown里的图片URL替换成本地路径，完美！

几个要注意的点 #

• 这个插件只认Markdown语法的图片，HTML标签里的<img src="外部URL">不会被处理
• 如果外部图片有防盗链机制，可能会下载失败，这时候要么手动下载，要么看看插件有没有配置请求头的选项
• 本地化后的图片会被Gridsome的资源处理机制接管，要是你还装了响应式图片插件，它还能自动生成不同尺寸的适配图

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