Image path with relative URLs

support
1

Hi,
a very simple question but I couldn’t find an answer.
I have this structure:

.
|
|- _index.md
|- mytopic.md
 - images
   |- myimage.png

With pretty Urls, “mytopic” lands in the following page: www.mywebsite.com/mytopic/.
So I need to reference the image as:

![](../images/myimage.png)

The image location is ../images/myimage.png instead of ./images/myimage.png.
However this is pretty annoying because it doesn’t corresponds to the real folder structure.
So rendering the markdowns with other tools (github, pandoc etc.) will not work.
Any idea?
Thanks!

1 Like
2

Pretty URLs are something else.

You are talking about relative URLs.

In my opinion it is not a good idea to reference images in the form you posted above.

It is preferable to keep the images next to the content file, so that image previews work in other Markdown editors.

3

I tried to place the image next to the content file:

|
|- _index.md
|- mytopic.md
 - myimage.png

But this still doesn’t work because the document lands in www.mywebsite.com/mytopic/index.html while the image is at www.mywebsite.com/mytopic.png.
The only thing that works is:

|
|- _index.md
 - mytopic
   |- myimage.png
    - mytopic.md

In this case yes, I can reference my image locally.
However, I am developing a documentation with many sections, each sections is a markdown file. It seems heavyweight to create a folder for each section.

4

Have a look at this similar topic:

5

Thanks, so I guess the short answer is “not possible”.
The only way I see is to activate “Ugly URLs”.
In this case the markdown file is rendered as www.mywebsite.com/mytopic.html. So the image can be referenced locally.

6

I’m trying another approach to build the website:

  • I’ll put all my document sections in the same file _index.md. This will allow to reference locally the images.
  • the top menu will use Hugo menu system: {{ range .Site.Menus.main }}
  • the side menu will use Hugo table of content: {{.TableOfContents}}

Although I like to split documentation in many files, I don’t think Hugo supports that very well (no table of content, broken image paths).

7

You may want to track https://github.com/gohugoio/hugo/issues/6545

8

A post was split to a new topic: Documents posted on GitHub looks different from rendered by Hugo