Images content url not compatible with Markdown

I have hosted the code on,
and the generated site page:


  • source file tree
└── demo
    ├── image2.png
    ├── images
    │   └── image.png
  • source file
## Header

Hi demo

  • source screenshot


Generated file

  • generated file tree
├── demo
│   ├── hello
│   │   └── index.html
│   ├── image2.png
│   ├── images
│   │   └── image.png
│   ├── index.html
│   └── index.xml
  • generated hello/index.html
<p>Hi demo</p>

<p><img src="image2.png" alt="image2" />
<img src="images/image.png" alt="image" /></p>
  • generated page screenshot

Have a look over here

Sorry, I have read the document, and maybe I mislead you before.
I am not going to just list a batch of images in a page continuously, instead, insert the image where needed, so I update the test demo.

For my test example above, the page hello/index.html generated from references the images within its own folder:

<p><img src="image2.png" alt="image2" /></p>

<p>Something esle &hellip;<br />
Test image 2</p>

<p><img src="images/image.png" alt="image" /></p>

e.g. hello/index.html thinks the file tree should just like bellow:

├── demo
│   ├── hello
│   │   └── index.html
|   │   ├── image2.png
|   │   ├── images
|   │   │   └── image.png

but, the real generated file tree is like bellow, so hello/index.html can not find the image file.

├── demo
│   ├── hello
│   │   └── index.html
│   ├── image2.png
│   ├── images
│   │   └── image.png

So how to config to make hello/index.html rendering OK?

  • shortcode for each image inside md file. I think it is insufficient when there are many images in md file, and it is not compatible with other markdown editor, such vscode and Typora. (If I misunderstand the using of shortcode please point out mistakes so that I can be corrected)
  • containing only 1 md file in each directory, e.g. file. It is insufficient, cause most of the time, we will put several md files belong to one category in the same directory.
  • customize the template file, may I ask how to?

Any help will be appreciated!

If you want to have pictures in the same folder as the page, you need the whole structure to reproduce the source markdown files.

├── demo
│   ├── hello
│   │   ├──
|   │   ├── image2.png
|   │   ├── images
|   │   │   └── image.png

Any practice suggestion?

Does the figure shortcode work for you?

{{< figure src="images/image.png" >}} and {{< figure src="image2.png" >}}

{{< figure src="images/image.png" >}} does not work too.

And, in my opnion, the format of inserting image is compatible with other Markdown editor such as Typora for preview maybe better.
So, is there other solution to keep the inserting image format ![image](images/image.png) but Hugo can also render the html page correctly?

I have made a custom theme, in the template use replaceRE to modify the image url.
But I don’t think this is a good idea, only for temporary use before gohugo team can deal with this problem.

{{ .Content | replaceRE "<img src=\"" "<img src=\"../" | replaceRE "<img src=\"../(https?://)" "<img src=\"$1" | safeHTML }}

Welcome to check my test site.,


You can fix this issue by creating a custom shortcode and using Page Resources for managing image in Makdown

# shortcodes/img.html
{{ $img := $.Page.Resources.GetMatch (.Get 0) }}
{{ $alt := .Get 1 }}
    <img src="{{ $img.RelPermalink }}" alt="{{ $alt }}" />


{{< img "images/my_image.jpg" "My image" >}}

instead of

![My image](/images/my_image.jpg)