Add config option for image root in markdown preview

[Duckle29]

I'm using VSCode to write some simple blog posts using the HUGO static site generator, and while the markdown preview is really nice, images can't load correctly in the preview.

This is because the project structure is:

blog
|-->content
| |-->posts
|   |-->post1.md
|-->static
  |-->image.png

however the path that you specify in the markdown of the post for the image is /image.png as the static folder serves as the root for image files.

It'd be nice to have a config option for the markdown preview, that'd allow you to set the image root, so that you could specify the root to be project_root/static

Thanks for a great editor :)

[xpe]

@Duckle29 Great idea! May I ask a favor? How do other editors do this? Is it as simple as I imagine, or is there any unexpected messiness in implementing this? For example, are there any problems arising from the upteen flavors of Markdown?

[Duckle29]

@xpe Honestly I've always just used VSCode and accepted it, making tweaks to images if they didn't look right once built. I just finally decided to make this post after having just ignored it for a while

[xpe]

@Duckle29 I think you'll be happier with how this feature request goes if you find an editor that does it well and look at their design. You might even be able to write a PR yourself.

[Duckle29]

@xpe In this case I don't see how that could change much. It's not much of a design (or I'm probably missing something) it's just that when the markdown render built into VScode looks for images. it should start at markdown.image_root so if there's ![nicepics/fancyImage.png] and the config has "markdown.image_root": "/home/dude/stuff/static" then it should load /home/dude/stuff/static/nicepics/fancyImage.png

[Wolverine1621]

I'd like to start looking into making a PR for this! I am a first-time VSCode contributor but it seems pretty doable. I'll likely ask on the Gitter later and I have plenty of reading to do, but does anyone have a general direction to look in for the markdown preview renderer code?

Thanks!

[xhiroga]

I manage my articles on zenn.dev as code, and it's necessary for image files to be stored in {project_root}/images. Additionally, for these images to be recognized on zenn.dev, they must start with /images. This functionality is essential for my workflow. Reference: https://zenn.dev/zenn/articles/deploy-github-images (The article is in Japanese)

[lllong33]

ref: https://stackoverflow.com/questions/75831497/how-can-i-paste-images-into-my-markdown-files-in-vs-code

I think the ${documentWorkspaceFolder} parameter solves this problem. Referring to my Settings, the file is placed in the images directory by default.

"markdown.copyFiles.destination": { "*/.md": "${documentWorkspaceFolder}/images/${documentBaseName}.png" } @Duckle29 @xpe

[jqknono]

@lllong33 some blog frameworks like hugo did not get the images by relative path.