GatsbyJS中如何在Markdown文章内正确链接本地内部图片？

开发者阿泽

2026-8-29

Gatsby Markdown 链接本地图片解决方案

Gatsby 默认只会自动解析 Markdown 图片语法 ![]() 内的相对路径，走图片压缩、hash重命名的资源处理流程，普通文本链接 []() 不会触发这个逻辑，所以才会出现路径匹配错误的问题，以下是3种无需复杂改造的实现方法：

零配置快速实现：将图片Markdown语法嵌套在链接中，链接地址指向同一张图片的相对路径即可，gatsby-remark-images 插件会自动将两处路径都替换为处理后的正式访问URL，点击渲染出的图片就会跳转到图片独立展示页，写法参考：
```
[![点击查看原图](../images/image.png)](../images/image.png)
```
如果需要纯文字链接而非图片缩略图，可以用下面两种方法。
插件配置适配原有写法：找到项目中 gatsby-config.js 里的 Markdown 解析插件配置，给 gatsby-remark-copy-linked-files 插件添加配置，让它接管图片类型的链接路径替换，配置代码如下：
```
{
  resolve: `gatsby-remark-copy-linked-files`,
  options: {
    ignoreFileExtensions: [] // 清空默认忽略的图片后缀列表，启用图片链接处理
  }
}
```
配置完成后重启开发服务，你原本写的 [link](../images/image.png) 就会自动指向Gatsby处理后的正确图片地址，不需要修改已有Markdown内容。
静态路径映射：把需要链接的图片放到项目根目录的 static/images 文件夹下，链接直接写根路径 [link](/images/image.png) 即可。Gatsby会将static目录下的所有文件原封不动映射到站点根路径，不会对文件重命名加随机hash，路径永久有效。