Prefix relative image paths with './'

[marcinjahn]

Some markdown engines (like the one used by the VuePress framework) do not display images with relative paths if there is no './' prefix in the path. This PR adds such a prefix to all images pasted in the markdown format.

[telesoho]

You can define MarkdownPaste.path = './your-folder' in setting, no necessary to change source.

[marcinjahn]

You can define MarkdownPaste.path = './your-folder' in setting, no necessary to change source.

Yeah, but it does not matter in this case. My issue is that the path that gets generated by the extension is not valid for some markdown engines. Some of them require you to put ‘./‘ explicitly in the path to refer to the current directory. For example, even though the file abc.png is in the same directory as the markdown file the ‘![] (abc.png)’ will not work sometimes.

However, your comment makes me wonder in my PR will work if someone changes the default setting that you mentioned. Need to check that.

[telesoho]

@marcinjahn If user input an absoult path for ex: /home/ubuntu/docs/my.png, it will get ./home/ubuntu/docs/my.png.

[marcinjahn]

@marcinjahn If user input an absoult path for ex: /home/ubuntu/docs/my.png, it will get ./home/ubuntu/docs/my.png.

Here's a full example describing my issue: I copied some image, I want to paste it into a markdown file in VS Code:

I press "ENTER". Here's what is pasted into markdown:

(ignore the text above the image, it's non-related, I just wanted to show that I'm pasting the image into a markdown document).

Here's how it's renderered by VuePress:

The image is missing.

As soon as I change the markdown to:

VuePress renders:

That's why in this PR I'm adding ./ to the path, to support markdown engines that require that.

[zinface]

When I was looking for information, I found that vuepress uses url-loader to access resources, so short paths cannot be recognized as relative resource paths. The solution is:

• manually add the prefix'. /'to the path.
• using markdown-it for conversion, there should be relevant configuration for vuepress.

You can use a short path to create a picture in typora (there is no ". /" prefix)

[marcinjahn]

When I was looking for information, I found that vuepress uses url-loader to access resources, so short paths cannot be recognized as relative resource paths. The solution is:

• manually add the prefix'. /'to the path.
• using markdown-it for conversion, there should be relevant configuration for vuepress.

You can use a short path to create a picture in typora (there is no ". /" prefix)

Do you suggest to drop this PR?

[vezaynk]

@marcinjahn I suspect that this PR will break other markdown editors that expect the current output. However, you can re-write the path on ad-hoc basis using a regex, like I did here: https://github.com/telesoho/vscode-markdown-paste-image/issues/56#issuecomment-1001234056

In your case, it would look something like this:

{
            "regex": "^([a-z0-9]+.*)",
            "options": "i",
            "replace": "./$1"
}

[marcinjahn]

@marcinjahn I suspect that this PR will break other markdown editors that expect the current output. However, you can re-write the path on ad-hoc basis using a regex, like I did here: #56 (comment)

In your case, it would look something like this:

{
            "regex": "^([a-z0-9]+.*)",
            "options": "i",
            "replace": "./$1"
}

Oh, I didn’t expect that other editors could stop working with that change. If that’s the case, then I’ll close the PR. Thanks for the suggestion!