HUGO

Relative path for markdown editor preview

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

.
├── 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?

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:

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

But this won’t help with:

Instead, you can use page bundles:

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

/content/section1/mypost/index.md

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

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

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

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