Relative images not working

[ConnyOnny]

When using relative paths to refer to an image or figure, it tries to resolve the path relative to the base URL of the page. I think this code from head.html is suspicious:
<base href="{{ .Site.BaseURL }}">
If I just remove it, everything works fine.
Is there any reason not to remove it?

[gundamew]

I use <base> to ensure every relative path works as expected.

Can you provide an example of the relative path issue?

[ConnyOnny]

Sorry for being so vague. I have this project structure:

content
- posts
- - 2021-07-my-post
- - - index.md
- - - diagram.png

From the index.md I want to reference the diagram.png. Usually this should work using {{< figure src="diagram.png" >}}. That will be generated to an HTML img tag also using the relative src attribute. But having the base tag in the head of the HTML makes the relative src behave differently: The browser will try to resolve the image relative to the base URI and not relative to the location of the post. Instead of the correct resolution mydomain.com/posts/2021-07-my-post/diagram.png it will resolve to mydomain.com/diagram.png so the image will not be found.

When I remove the base from the theme, my post including the image works as expected. Also I cannot find anything else that does not work anymore. That's why I was asking, why exactly the base is set at all by the theme.

[gundamew]

Thank you. I will check this issue. 👍

[gundamew]

Short answer: If you want to add images in Markdown. Please put the image files in the static path.

Long answer: After studying the document, I think the Page Bundles feature fits your description.

And I also remember that why I did not use it:

1. For only adding images into posts. Page Bundles are too complex for me.
2. Even I use Page Bundles in Bingo. I still can not insert images in the middle of the post content with Markdown or shortcodes.

So I suggest you put the images in the static path. That is easier.

References:

• (Official) Directory Structure
• (Official) Static Files
• (Official) Page Resources
• (Official) Images in markdown relative to content
• Hugo Page Resources | Regis Philibert

[ConnyOnny]

Thank you very much for looking into it. Indeed "page bundles" is what I am trying to achieve: Each of my blog posts comes with poorly named image files, which if thrown all together into the static directory would quickly become an unfathomable mess.
However I don't see why they are complicated. At work we use Hugo with the well-known Docsy theme and we also use page bundles, so I thought I'd look how Docsy handles this: They do no preprocessing on the "src" attribute on a "figure" (even though they overwrite figure to provide a fancy gallery and whatnot). The only difference between docsy and hugo-bingo concerning image sources is that docsy does not set a base tag in the HTML head, so relative paths for images just work.

I don't know if there is anything complicated to page bundles, which eludes me at the present time, but I have the feeling that showing images from page bundles does not have to be difficult.

As I said I removed the base tag from my hugo-bingo fork and nothing bad happened. And so many messages into this conversation I still don't know why the base tag would be useful in the first place.

I use <base> to ensure every relative path works as expected.

For me it looks like the opposite: the base tag causes relative paths to work in a (for me) unexpected way.

If you want to use images from the static folder, you should be able to do that simply by prefixing them with /, s.t. the browser knows, that these are absolute paths. The only time that is not possible is if the website is not at the root of the (sub-)domain, e.g. at mydomain.com/website. I don't know how one deals with those situations using Hugo, but even then using base seems pretty strong, because it interacts with all relative links.

[gundamew]

I said "Page Bundles are too complex for me" because IMO it is much easier to put images in the static path. The feature is not complex technically.

Back to the base element. I found some of the Hugo themes have similar issues since my last comment. It looks like a known bug but undocumented. And it can be fixed by removing the base element as you said.

I added the base element to ensure relative paths work fine. But looks like that's not necessary today.

I will remove the base element from partials/head.html. Thanks for the reporting! 👍