Images content url not compatible with Markdown

support
1

I have hosted the code on https://github.com/Honghe/hugo_test,
and the generated site page: https://honghe.github.io/hugo_test/

Source

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

Hi demo

![image2](image2.png)
![image](images/image.png)
  • source screenshot

image

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>
</div>
</main>
  • generated page screenshot
    image
2

Have a look over here

3

@funkydan2
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 hello.md 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. index.md 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!

4

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
│   │   ├── index.md
|   │   ├── image2.png
|   │   ├── images
|   │   │   └── image.png
5

@Mikhail
Any practice suggestion?

6

Does the figure shortcode work for you?

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

7

@funkydan2
{{< 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?

8

I have made a custom theme, in the template use replaceRE to modify the image url.
https://github.com/Honghe/hugo-concise/commit/fcf7a8b17212d5118a177869e1f5ae55441991b5
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.
https://github.com/Honghe/hugo_test,
https://honghe.github.io/hugo_test/

9

Hello,

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 }}
<p>
    <img src="{{ $img.RelPermalink }}" alt="{{ $alt }}" />
</p>

Usage:

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

instead of

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