# Relative path for markdown editor preview

**URL:** <https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403>\
**Category:** support\
**Created:** [November 14, 2020, 11:13am UTC](https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403 "2020-11-14T11:13:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yo-goto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yo-goto/32/12731_2.png) [@yo-goto](https://discourse.gohugo.io/u/yo-goto)\
**Post date:** [November 14, 2020, 11:13am UTC](https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403/1 "2020-11-14T11:13:23Z")

</div>

Hi, there. I’m trying to put images on my `/content/mypost.md` using relative path like real directory structure.

my directory structure is like this

```auto
.
├── content
│ ├── section1
│	│ └── mypost.md
│ ├── section2
│ └── _index.md
├── static
│ ├── header
│ ├── img
│	│ ├── img1.png
│	│ ├── img2.png
│	│ └── img3.png
│ ├── logo
│ └── webfonts

```

What I want to do is, on `/content/section1/mypost.md`, putting an image form `/static/img/img1.png`

at the same time, I want to preview my markdown file by other markdown editor or some text editor. so I want to use this relative path `![img1](../../static/img/img1.png)` on `mypost.md` so that I can preview.

I tried this image path `![img1](../../static/img/img1.png)` after command ‘hugo’ but ended up missing the image. Why?  
How can I do that? Is this possible?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [November 14, 2020, 11:33am UTC](https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403/2 "2020-11-14T11:33:54Z")

</div>

Assets that you place in `/static` are copied to the root of your web site. So, `/static/img/foo.jpg` has a site-relative path of `/img/foo.jpg`. Given your example, either of these will render correctly in the browser:

```auto
![img1](/img/img1.png)
![img1](../../img/img1.png)

```

But this won’t help with:

> [@yo-goto](#):
>
> I want to preview my markdown file by other markdown editor or some text editor

Instead, you can use [page bundles](https://gohugo.io/content-management/page-bundles/#readout):

```auto
content
└── section1
    └── mypost
        ├── img1.png
        └── index.md

```

/content/section1/mypost/index.md

```auto
+++
title = "Mypost"
date = 2020-11-14T06:28:02-05:00
draft = false
+++
![img1](img1.png)

```

---

<div class="post-metadata">

**Author:** ![yo-goto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yo-goto/32/12731_2.png) [@yo-goto](https://discourse.gohugo.io/u/yo-goto)\
**Post date:** [November 14, 2020, 11:37am UTC](https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403/3 "2020-11-14T11:37:11Z")

</div>

thank you so much. I understood.  
I’m trying bundles

---

<div class="post-metadata">

**Author:** ![yo-goto](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/yo-goto/32/12731_2.png) [@yo-goto](https://discourse.gohugo.io/u/yo-goto)\
**Post date:** [November 16, 2020, 9:58am UTC](https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403/4 "2020-11-16T09:58:43Z")

</div>

Thanks to jmooring, I succeed previewing images by page bundles. Thank you so much.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [November 18, 2020, 9:58am UTC](https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403/5 "2020-11-18T09:58:46Z")

</div>

Closed on November 18, 2020, 9:58am UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.