VSCode image preview扩展如何配置短路径识别为指定目录完整路径

你需要的「仅识别路径、不修改原代码字符串」的效果，可通过kisstkondoros.vscode-gutter-preview扩展自带的路径映射配置实现，无需手动输入完整绝对路径。

配置实现方法 #

• 打开VSCode设置面板（快捷键Ctrl+,），搜索gutterPreview定位到该扩展的专属配置项
• 找到gutterPreview.pathMappings路径映射配置块，该配置的核心逻辑是建立「代码中输入的短路径」与「磁盘实际文件路径」的对应关系，匹配阶段仅自动关联实际文件位置生成预览，全程不会改动编辑器内你输入的原字符串
• 针对你提到的场景，可直接在用户配置文件settings.json中添加如下规则：

"gutterPreview.pathMappings": [
  {
    "virtualPath": "foo/",
    "actualPath": "C:/Users/CAIO/Documents/Github/images/"
  }
]

配置生效后，当你在代码中输入foo/o_7174.png这类字符串时，扩展会自动将前缀foo/替换为配置的实际路径，定位到C:\Users\CAIO\Documents\Github\images\o_7174.png加载预览，完全不会修改原有输入内容。

此前识别失败的原因说明 #

• 你之前尝试将images文件夹加入工作区，直接输入o_7174.png无法触发预览，是因为扩展默认的路径查找逻辑仅会从当前打开脚本的同级目录下定位图片文件，不会全局遍历整个工作区的所有文件夹搜索匹配项，仅把图片文件夹加入工作区无法满足默认匹配规则。
• 如果希望不输入foo/这类路径前缀，直接输入o_7174.png就能触发预览，可将映射规则调整为空虚拟前缀匹配：

"gutterPreview.pathMappings": [
  {
    "virtualPath": "",
    "actualPath": "C:/Users/CAIO/Documents/Github/images/"
  }
]

注意事项 #

• Windows环境下建议路径统一使用正斜杠/作为分隔符，避免反斜杠带来的转义兼容问题
• 若配置了多条路径映射规则，扩展会按照列表从上到下的顺序，优先匹配排在前面的规则
• 配置保存后扩展会自动加载新规则，无需重启VSCode即可生效

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