# Relative image paths with VSCode Markdown editor

**URL:** https://zola.discourse.group/t/relative-image-paths-with-vscode-markdown-editor/2035
**Category:** Uncategorized
**Created:** [January 27, 2024, 10:03pm UTC](https://zola.discourse.group/t/relative-image-paths-with-vscode-markdown-editor/2035 "2024-01-27T22:03:30Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![onnimonni](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/onnimonni/32/1136_2.png) [@onnimonni](https://zola.discourse.group/u/onnimonni)
#### Post date: [January 27, 2024, 10:03pm UTC](https://zola.discourse.group/t/relative-image-paths-with-vscode-markdown-editor/2035/1 "2024-01-27T22:03:30Z")

</div>

Hey,

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](https://code.visualstudio.com/updates/v1_79#_copy-external-media-files-into-workspace-on-drop-or-paste-for-markdown)

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

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

```

It then creates the the following addition into my markdown:

```md
![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?

---

<div class="post-metadata">

### Author: ![adrianboston](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/adrianboston/32/907_2.png) [@adrianboston](https://zola.discourse.group/u/adrianboston)
#### Post date: [January 31, 2024, 3:45am UTC](https://zola.discourse.group/t/relative-image-paths-with-vscode-markdown-editor/2035/2 "2024-01-31T03:45:23Z")

</div>

Hmm. you might try [shortcodes](https://www.getzola.org/documentation/content/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`

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

```

in `page.md` called the shortcode

+++  
title=“XYZ”  
weight = 1  
+++  
Here is my image  
{{image\_trim(filename=‘…/…/assets/images/hello-world/Screenshot.png’)