windows 下产生的路径不能预览

[ssqf]

非常感谢，这个很好用，但是有两个问题

一、windows 下产生 .\image\xxx.png 预览的时候不能显示图片

需要变为 ./image/xxx.png 才可正常

    /**
     * Convert the given Windows or Unix-style path into a normalized path that only uses forward slashes and has all superflous '..' sequences removed.
     * If the path starts with a Windows-style drive letter, a '/' is prepended.
     */
    Paster.normalize = function(pathStr) {
        pathStr = pathStr.replace(/\\/g, '/');
        if (/^[a-zA-Z]\:\//.test(pathStr)) {
            pathStr = '/' + pathStr;
        } 
        pathStr = path.normalize(pathStr); // use node's normalize to remove '<dir>/..' etc.
        pathStr = pathStr.replace(/\\/g, '/');
        return pathStr;
    };

二、相对目录使用相对于工程根目录的相对路径较好

1. 绝对路径就使用绝对路径
2. '.' 开头的使用文件相对路径
3. 非点开头的非绝对路径使用相对工程根目录的相对路径

        // generate image path
        if (path.isAbsolute(folderPathFromConfig)) {
            imagePath = path.join(folderPathFromConfig, imageFileName);
        }
        else if('.' === folderPathFromConfig.charAt(0)){
            imagePath = path.join(folderPath, folderPathFromConfig, imageFileName);
        }
        else {
            imagePath = path.join(vscode.workspace.rootPath, folderPathFromConfig, imageFileName);
        }
        return imagePath;

[mushanshitiancai]

谢谢，很好的建议，第二点每个人的需求不同，我考虑使用变量吧，比如${projectRoot}和${currentFileDir}。你觉得如何？

[ssqf]

我觉得vscode以文件夹作为工程，如果使用变量，这个文件夹移动或改名后，使用变量则又需要修改变量值，很麻烦。一般也不会把文件保存到非工作目录的其他目录下，markdown都是上传到git服务器，直接浏览，而图片路径也只能找到相对工程的路径。 我觉得只需要提供两种路径方式： 1.相对于工作目录的路径 2.相对当前文件路径

绝对路径的使用意义不大。修改了工作目录或者上传到服务器，都可能导致路径找不到的问题

[mushanshitiancai]

我并没有提到绝对路径，变量也不是你想的“需要设置的”，而是占位符。我觉得使用是否.开头来区分是很不符合直觉和路径本身的定义的。所以使用变量占位符。{projectRoot}和${currentFileDir}分别指当前项目路径，和当前编辑的文件的路径。

到目前讨论的配置项都是pasteImage.path，这个配置项是指定“把图片存放到哪个目录中去”。插入的path，目前都是“相对于当前文件位置的”。对于这个path的控制，应该再弄一个设置，比如叫pasteImage.basePath，用于指定插入的path是相对于哪个基本path的。

这两个变量结合${projectRoot}和${currentFileDir}，就可以指定：

1. 哪里存图片（绝对/相对于当前编辑文件/相对于当前工程）
2. 插入URL的格式（绝对/相对于当前编辑文件/相对于当前工程）

比如我本地的博客目录结构是：

/mushan/blog 博客根目录
/mushan/blog/post 博客目录
/mushan/blog/public 博客资源目录，上传服务器后，可以访问
/mushan/blog/public/img 博客图片目录，上传服务器后，通过/img访问

对于这种结构，配置可以是：

"pasteImage.path": "${projectRoot}/public/img",
"pasteImage.basePath": "${projectRoot}/public",

然后使用vscode打开/mushan/blog目录。粘贴图片：

1. 插件计算将图片放在什么目录，寻找pasteImage.path配置，将${projectRoot}替换为/mushan/blog，得到/mushan/blog/public/img，保存图片，图片的地址是：/mushan/blog/public/img/xx.png
2. 插件计算插入的图片的url，resolve pasteImage.basePath配置和图片地址，得到img/xx.png，插入文件中

这着配置是因为是写博客，要上传的。所以插入的图片地址是针对服务器路由的，本地没法预览。而对于另外一种情况，如果用户只是想本地记录笔记，其目录结构可能是这样的：

/mushan/blog 博客根目录
/mushan/blog/post 博客目录
/mushan/blog/post/java/java.md 一篇文章
/mushan/blog/post/java/img/xx.png 在文件所在的目录中的img保存这篇文章的图片

对于这种结构，配置可以是：

"pasteImage.path": "${currentFileDir}/img",
"pasteImage.basePath": "${currentFileDir}",

而现有的配置，比如“.”，其实等价于下个版本的 "${currentFileDir}"。

[ssqf]

这样也挺好的，用相对目录本地很博客都可以访问岂不是更好 比如： 网站根目录是：/webroot/ 有多个子分类： pro1、Pro2 在用网站的绝对目录就有问题了，单相对路径不会有问题 /webroot/pro1/image/xxx.png 图片使用 /image/xxx.png就找不到了，而使用 ../image/xxx.png 不管嵌套多少都没问题。网站和本地都可以使用

[mushanshitiancai]

。。。我哪里提到必须用绝对目录了，现在插入的就是相对目录。即使相对目录，本地和网站也不一定都能使用，要看网站的路由配置。

[telesoho]

我个人喜欢把所有的图片保存到工程的指定文件夹下，然后插入markdown文档的代码自动把路径转换为相对路径。比如在设定文件中指定：

pasteImage.path = "${workspaceRoot}/images"; 如果编辑的当前编辑的文档是${workspaceRoot}/blog/readme.md, 则插入readme.md的路径应该是：

![](../images/2017-12-12.png) 如果编辑的当前编辑的文档是${workspaceRoot}/readme.md, 则插入readme.md的路径应该是： ![](images/2017-12-12.png)

[mushanshitiancai]

@www2t @telesoho 原谅我的拖延症。。。我更新了插件，添加了pasteImage.basePath和pasteImage.forceUnixStyleSeparator配置项。第一个配置项上面的讨论解释过了。@telesoho 你可以使用这个配置来达到你说的效果。

pasteImage.forceUnixStyleSeparator=true可以在windows在强制使用UNIX风格的路径分隔符，现在默认设置为true。