Relative image paths with VSCode Markdown editor


I’m editing Markdown files directly with Visual Studio Code with the drag and drop ability to add images to markdown. You can see more about it here: Visual Studio Code May 2023

I added a custom file path rule into my VS Code config $PROJECT/.vscode/settings.json:

  "markdown.copyFiles.destination": {
        "**/*": "${documentWorkspaceFolder}/assets/images/${documentBaseName}/"

It then creates the the following addition into my markdown:

![Alt text](../../assets/images/hello-world/Screenshot.png)

How can I make these default relative paths work in the markdown content generated by Zola?

Is there a way for me to for example automatically remove the ../.../assets/ prefix from the urls?

Hmm. you might try shortcodes within the markdown section of the page.
GIve the fllowing a try. Ive used shortcodes but none with any logic. just plain ol html and variables.
That being said, <div {% if class %}class="{{class}}"{% endif %}> is an example on that shortcode page … so maybe

In templates/shortcode folder create file image_trim.html

{{ filename | trim_start_matches(pat="./.../assets/") }}
<img src="{{config.base_url}}/{{filename}}" alt="{{alt}}> 

in called the shortcode

weight = 1
Here is my image