一直使用 Obsidian 来写 markdown，但是使用 Obsidian 和 VuePress 在静态图片资源路径管理上有一些冲突，我使用 Obsidian 的相对路径来存储图像， Obsidian 与 VuePress 之间存在以下冲突：

• 当 VuePress1.x 处理带有中文和空格的图片路径时存在问题，VuePress 会找不到资源路径 。
• VuePress 要求图片格式需以 ./ 或者 ../ 开头，Obsidian 不要容易做到，需要自己写一个插件

具体问题原因：

假如有 Obsidian 的图像路径：

![image](./图片/image.png)

VuePress的处理方式：

%E5%9B%BE%E7%89%87/image.png

中文的资源路径被转译了 ./图片/image.png ===> ./%E5%9B%BE%E7%89%87/image.png 并且 webpack 并没有找到 %E5%9B%BE%E7%89%87/image.png 此资源

解决办法

1. 安装 markdown-it-disable-url-encode

npm i markdown-it-disable-url-encode

2. 将其注入vuepress 配置文件中 .vuepress/config.js

    module.exports = {
      // .....
      markdown: {
        // ......
        extendMarkdown: md => {
          md.use(require("markdown-it-disable-url-encode"));
        }
      }
    };

.vuepress/config.ts

import markdownItDisableUrlEncode from "markdown-it-disable-url-encode";
markdown: {
	//......
    extendMarkdown: md => {
      md.use(markdownItDisableUrlEncode);   //解决图片链接中文资源问题
	  //......
    },
  },

参考文章

https://segmentfault.com/a/1190000022275001 (opens new window) https://github.com/nanyuantingfeng/markdown-it-disable-url-encode (opens new window)