快捷键

• 粘贴： Ctrl+V
• 拖拽图片：按住Shift拖拽图片到Markdown文档内

设置-markdown.copyFiles.destination

项：
**/*

值
${documentWorkspaceFolder}/.vuepress/public/img/docs/

Alt text

效果：

• 直接Ctrl+V粘贴图片到Markdown文档内，并且图片保存到路径：​ .vuepress/public/img/docs/

• 命名规则：按复制图片的文件和后缀命名，如果是通过微信截图等工具，默认会以image为默认名

• 重复规则：如果存在重复，则会自动在文件名后加上符号​ - ，例如 imgage-1.png

教程

图片默认存放目录与粘贴该图片的 Markdown 文件同级，插入的 Markdown 片段如下(假设图片名为 image.png)：

![Alt text](image.png)

除了图片，新功能还支持音频和视频，会生成 <audio> 和 <vidoe> 的 Markdown 片段。为了简单起见，本文只讲图片。

功能使用配置

某些情况下我们可能需要调整该功能的默认行为，包括：

• 自定义存放目录
• 重命名
• 重名覆盖
• 功能关闭

为方便后续配置介绍，我们建立一个名为 myProject 的项目，项目的绝对路径假定为 /User/me/myProject。

并建立如下的项目结构：

--docs
----api
------README.md
--assets

自定义存放目录

由 markdown.copyFiles.destination 配置控制图片文件的存放目录。

    "markdown.copyFiles.destination": {
        "/docs/api/**/*": "${documentWorkspaceFolder}/docs/images/"
    }

该配置是一个对象，key 使用 Glob 语法，表示匹配的 Markdown 文档；value 则表示所匹配的这些 Markdown 文档，它们的图片文件存放目录，可以使用一些简单的变量。

• ${documentFileName} — Markdown 文档的完整文件名，比如 README.md
• ${documentBaseName} — Markdown 文档的基本文件名，比如 README
• ${documentExtName} — Markdown 文档的拓展名，比如 md
• ${documentDirName} — Markdown 文档的上级目录名词，比如示例的 api
• ${documentWorkspaceFolder} — Markdown 文档工作区路径，比如示例的 /Users/me/myProject。如果 Markdown 文档不是工作区的一部分，则该值与 ${documentDirName} 相同
• ${fileName} — 被拖拽或粘贴的图片文件名，比如 image.png

常见的图片存放目录有这两种：

1. 与当前 Markdown 文档同级并新建目录
2. 工作区固定目录统一管理图片

1. Markdown 同级目录（假设为 images）

VSCode 配置：

    "markdown.copyFiles.destination": {
        "**/*": "images/"
    }

项目结构

--docs
----api
------images
--------image.png
------README.md

markdown 插入内容

![Alt text](images/image.png)

2. 工作区固定目录（假设为 ​​**工作区目录/assets​）**

VSCode 配置：

    "markdown.copyFiles.destination": {
        "**/*": "${documentWorkspaceFolder}/assets/"
    }

项目结构

--docs
----api
------README.md
--assets
----image.png

markdown 插入内容

![Alt text](../../assets/image.png)

重命名

markdown.copyFiles.destination 配置字段也可以用于图片重命名。

当配置以 "/" 结尾时，VSCode 会将其视为目录，并在原始文件名前拼接该路径作为新的文件路径。但如果结尾没有 "/"，VSCode 将其视为准确的文件路径。

以下面配置为例：

    "markdown.copyFiles.destination": {
        "**/*": "images/custom-${fileName}"
    }

如果原始图片名为 "image.png"，生成的图片名将是 "images/custom-image.png"。

目前，配置支持类似于 片段语法（snippet syntax） 的正则表达式变量替换语法，但其功能相对有限，缺少了内置变量和转换器。GitHub 上有个 issue 就是关于时间戳重命名的，如果官方解决的话意味着需要支持完整的片段语法。

    "markdown.copyFiles.destination": {
        "/docs/**/*": "images/me.${fileName/(.*)\\.(.*)/$2/}"
    }

❝ 如果粘贴的图片是 test.jpg ，那么新的图片路径为 images/me.jpg

因此，就目前来说，可以理解为重命名功能受限，无法实现更复杂的编码转换等需求。

重名覆盖

如果出现重名（通常出现在截图，图片名始终为 image.png），默认不会覆盖，而是修改图片名词后缀并进行自增。

比如出现的重名是 image.png，那么新图片名词为 image-1.png

如果希望重名覆盖，可以配置 overwriteBehavior 字段

"markdown.copyFiles.overwriteBehavior": "overwrite"

功能关闭

此项功能默认开启，如果觉得干扰，也可以配置 copyIntoWorkspace 字段进行关闭

// 拖拽行为
"markdown.editor.drop.copyIntoWorkspace": "never"
// 粘贴行为
"markdown.editor.filePaste.copyIntoWorkspace": "never"

#