How to display correct local images (not featured images) when baseURL include subdirectory

support
1

I installed hugo-extended on my Win11 using Choco, version v0.134.0. Then follow the official tutorial to create a new site, download ananke, and configure it for use.

Then I created a new test.md file with the following content:

+++
title = 'test'
date = 2024-09-09T13:08:57+08:00
draft = false
featured_image = '/images/fun.png'
+++

have a lot of fun...
! [](/images/fun.png)

And I place the image fun.png in the static/images directory. At this time, running hugo server, everything is OK.

Because I plan to publish the entire site under example.org/mysite, so I open hugo.toml and change baseURL='https://example.org/' to baseURL='https://example.org/mysite'. Now, if I run hugo server again and clear the browser cache, I found that the local images cannot be displayed. At the same time, the feature image was still displayed normally.

After checking the generated HTML, it was found that the image address was incorrect. It should be /mysite/images/fun.png , but /images/fun.png .

Of course, if I modify the image syntax of test.md to ![](/mysite/images/fun.png) by handy, the problem can be solved, but this solution is too ugly, isn’t it? Will the location of my website change in the future, and all the images in all the articles have to be modified one by one?

I tried a few themes, such as Binario and the problem remains.

How can I correctly display local images when baseURL include subdirectory ?
thank you!

2

see next post for are more up to date answer

Have look at this post. It describes various alternatives:

3

The posting you reference was written before the release of v0.123.0. There’s a better way to handle this now:

https://discourse.gohugo.io/t/markdown-images-get-wrong-url/51033/3

1 Like
4

@irkode @jmooring thanks for your answers.

I’m just a new user of hugo, and I can’t understand your solusions exactly. You are experts in Hugo, but i am not. I am just want to write some blogs, and all I need is an environment that allows me to write quietly. Perhaps I do not intend to invest too much time becoming an expert in Hugo. Compared to making the website more beautiful, I focus more on the content itself.

when I tried the {{ <base href="{{ site.BaseURL }}" and found that I have no idea about template.

And I tried to set canonifyURLs:true in my hugo.toml，and the css disappeared with the local images appeared.

Finally, I used Leaf Bundles mode and move my fun.png from /static/images to /content/posts, and now, it works. I just need to perform some strange actions on my pictures.

  • First, the address of images in the articles should add ../ prefix
  • Second, the featured images should add posts/ prefix

Now my test.md looks like

+++
title = 'test'
date = 2024-09-09T13:08:57+08:00
draft = false
featured_image = 'posts/fun.png'
+++

have a lot of fun...
![](../fun.png)

In my simple opinion, the html engine of Hugo should demonstrate consistency in various situations about images. But not.

Strange, but it works!

5

It does what’s described in the documentation. And it is a complex product that requires some leaning.

6

I’m not sure what you’re doing, but modifying your site configuration as I described in my previous response works great.

With this project structure…

assets/
└── images/
    └── b.jpg
content/
├── posts/
│   ├── test/
│   │   ├── a.jpg
│   │   └── index.md
│   └── _index.md
└── _index.md
static/
├── images/
│   └── c.jpg
└── favicon.ico

…this markdown works fine:

![a kitten](a.jpg)
![another kitten](images/b.jpg)
![yet another kitten](images/c.jpg)

Try it yourself:

git clone --single-branch -b hugo-forum-topic-51508 https://github.com/jmooring/hugo-testing hugo-forum-topic-51508
cd hugo-forum-topic-51508
hugo server
7

Thanks for your reply.

All I did was follow the official tutorial ：

hugo new site mysite
cd mysite
git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml

And modify the baseURL as https://example.org/mysite under hugo.toml

All the pictures in my blogs are stored locally.

Now I hope my images can be displayed in the normal syntax of Markdown.

Anyway, I can use the strange syntax mentioned earlier to implement it now. I hope that Hugo and its official recommended theme (ananke) can pay attention to this issue and upgrade in the future to be more user-friendly for ordinary users.

8

That’s not what I asked you to do, so it’s not surprising that you are having problems.

1 Like