# Vuepress 图片资源中文路径问题

一直再使用 Typora 编写Markdown文件,最近玩了一下Vuepress, 发现Typora

编写的MD文件在VuePress之中不能被正常编译

# 问题现象

# 英文资源路径

demo.md

# Hello VuePress!

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

1
2
3
4

启动调试服务
- 服务启动成功
- 没有任何问题
- 图片被编译成绝对路径
修改 demo.md ,将图片依旧设置成相对路径, 但是不以 ./ 开头
```
# Hello VuePress!

![image](assets/image.png)
```
1
2
3
4
观看结果
- 图片不能显示
- 图片资源被编译成相对路径

# 中文资源路径

更新到中文图片资源路径

# Hello VuePress!

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

1
2
3
4

启动服务
- 页面一片空白
- 未渲染IMG资源的DOM节点
- console 4处报错
最后一处报错信息可以发现, 中文的资源路径被转译了

./图片/image.png ===> ./%E5%9B%BE%E7%89%87/image.png

并且webpack 并没有找到 %E5%9B%BE%E7%89%87/image.png 此资源
修改资源路径(删除./)

页面IMG资源DOM节点已经渲染
中文路经被转译
console 没有报错

# 总结一下

图片资源以英文字符为路径
相对路径以 ./ 或者 ../ 开始的正确路径

同时符合以上两条, 就没问题.

图片资源路径如果不是英文
图片资源是相对(短)路径(不以 ./ ../开始 )

只要有以上任何一条, 编译将失败

但是:

Typora 引用的资源路径, 是以文件名创建的相对目录, 并且相对路径使用的是短路径

而且中文文件名是正常操作(对于我来说).

很不幸, 两条编译失败的情况同时命中.

# 问题分析

Vuepress 本身使用的是 webpack
图片引用使用的应该是 url-loader/file-loader
*.md 文件的编译使用的是 markdown-it

本能的能够猜测到部分真相了:

如果图片资源的引用是使用 url-loader , 那么短路径访问的就不再是相对路径,而是 node_modules 目录下资源.所以,在vuepress中的路径资源必须是以 ./ or ../开始
markdown-it 会对路径做一个encode 操作, 具体转换由 mdurl 执行

https://github.com/markdown-it/markdown-it/blob/575cfeab8acd2d59d637e856d3a205c6e81419cb/lib/index.js#L47

解决方案就很简单了 :

将短路经之前填补 ./
将资源url执行一次 mdurl.decode

编写markdown-it插件

markdown-it-disable-url-encode

# 解决方案

安装 markdown-it-disable-url-encode
```
npm i markdown-it-disable-url-encode
```
1
将其注入vuepress 配置文件中

.vuepress/config.js

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

1
2
3
4
5
6
7
8
9
10
11

至此,Typora 编写的markdown文件就可以在vuepress中完美编译了