When using a baseURL with path, links to static resources don't include path (but CSS, JS and page links do)

[rickschubert]

High-Level Scenario

Given I use a baseURL with path, i.e. https://mywebsite.net/blog
And I build my site using hugo or hugo server
Then CSS links start with https://mywebsite.net/blog
And JS links start with https://mywebsite.net/blog
And page links start with https://mywebsite.net/blog
But links to static resources only start with "https://mywebsite.net/

Lower Level description

Given I use a baseURL with path, i.e. https://mywebsite.net/blog
And I have a markdown file content/posts/my-first-post.md
And I have an image under static/images/my-image.jpg
And the markdown file contains a link like this: ![](/images/my-image.jpg)
When I generate the site using hugo
Then the image src attribute reads https://mywebsite.net/images/my-image.jpg
But the image src attribute should read https://mywebsite.net/blog/images/my-image.jpg

What version of Hugo are you using (hugo version)?

$ hugo version
Hugo Static Site Generator v0.79.0-1415EFDC windows/amd64 BuildDate: 2020-11-27T09:06:43Z

Does this issue reproduce with the latest release?

Yes

[davidsneighbour]

This is not a bug. Please open a post on discourse.gohugo.io and add a template that shows, how the src-attribute for the image is built. There are ways to prepare the URL properly. Or you remove the starting slash from the referring tag (images/my-image.jpg and not /images/my-image.jgp).

See https://discourse.gohugo.io/t/absurl-function-strips-path-when-using-baseurl-flag/5925

Have a look at page bundles to find a way to keep your post and images together, then it's even easier to reference them: https://gohugo.io/content-management/page-bundles/

[rickschubert]

@davidsneighbour Thanks for the fast response and sorry for my slow reply. I can actually replicate the problem though and created the following repository for you to showcase the problem: https://github.com/rickschubert/gohugo-base-url-with-path-issue

Given my base URL (`config.toml`) is http://example.org/blog - which is an URL that includes a path
And my config.toml file includes `canonifyurls = true`
And I have an image `example.jpg` in my `static` directory
And I reference the image in my markdown file using `![Example image here](/example.jpg)`
And I reference the image in my markdown file using `![Example image here](example.jpg)`
And I reference the image in my markdown file using `![Example image here](/blog/example.jpg)`
And I reference the image in my markdown file using `![Example image here](blog/example.jpg)`
When I generate the website using `hugo server` (see also `public` directory for output using `hugo`)
And I visit the example post http://localhost:1313/blog/posts/example-post/
Then I can see that the image reference using `/example.jpg` does not work
Then I can see that the image reference using `example.jpg` does not work
And I can see that the image reference using `/blog/example.jpg` does work
And I can see that the image reference using `blog/example.jpg` does not work

As can be seen from this example, it doesn't matter whether a / is used or not - it still does not work. In fact, it seems like the Gohugo documentation is also suggesting to use leading /, such as here: https://gohugo.io/content-management/static-files/ :

[...] to include it in a document you can use ![Example image](/image.png) )

Please note that the problem can be fixed when using canonifyurls = true in the config.toml file but I don't think it would be a good user experience to have this setting required if using a baseUrl with paths - it seems to me like baseUrl should simply also allow for URLs with a path. canonifyurls plays fine with the ananke theme, but with other themes i.e. with anubis it then causes other links to break, such as the archive URL.

[pmatiash]

I've checked this on v0.81.0-DEV-ED3071B linux/amd64
This is working properly when baseURL = "http://example.org/blog" and with or without canonifyurls.
So for ![Example image](/images/my_image.jpg) hugo generated:

• <img src="http://localhost:1313/blog/images/my_image.jpg" alt="Example image">
• <img src="/images/my_image.jpg" alt="Example image">

[xoxys]

I encountered the same issue even with v0.81.0-DEV. @pmatiash Why do you think it is working? As you can see in your post, it is not working correctly without canonifyurls=true (but it should).

Config:

baseURL: http://example.org/blog
canonifyURLs: false

Current result:

<img src="/images/my_image.jpg" alt="Example image">

Expected result:

<img src="/blog/images/my_image.jpg" alt="Example image">

Otherwise, it does not work and the image is not shown.

[xoxys]

As mentioned in a forum thread I looked into render hook templates and what is working for me is using relURL e.g.:

<a href="{{ .Destination | safeURL | relURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}</a>

But still, this should IMO work out of the box.

[pmatiash]

hey @xoxys, why do you expect to see /blog in the relative path?
I could be wrong, but If you will set baseURL = "http://example.org/blog", all relative paths will be the same as for
baseURL = "http://example.org". In both cases relative path will be /images/my_image.jpg. But in case of /blog image has been rendered properly anyway (at least in my case), because somewhere inside hugo should concatenate baseURL + image path. Which in our example will be like: http://example.org/blog + /images/my_image.jpg

[xoxys]

hey @xoxys, why do you expect to see /blog in the relative path?

Maybe I'm wrong, but I would expect it because that's what I get if I use e.g. href="{{ "fonts/Metropolis.woff2" | relURL }}" is href="/blog/fonts/Metropolis.woff2" and in my opinion there should be a way to achieve exactly this behavior with Markdown links.

I could be wrong, but If you will set baseURL = "http://example.org/blog", all relative paths will be the same as for
baseURL = "http://example.org". In both cases relative path will be /images/my_image.jpg. But in case of /blog image has been rendered properly anyway (at least in my case), because somewhere inside hugo should concatenate baseURL + image path. Which in our example will be like: http://example.org/blog + /images/my_image.jpg

And that's the point that's confusing me... How/why does it work for you while it is definitely broken for me and @rickschubert? Markdown links and images are rendered to e.g. src="/media/bundle-menu.png"and the browser will use http://localhost:1313/media/bundle-menu.png which is simply wrong as the image is only available at /blog/media/bundle-menu.png (while media is a subdir of static).

[id027102]

Problem stay with version 0.88.1
base url : https://example.com/hugo
In md file : testme
has as result :

1. https://example.com/hugo/post/test when canonifyurls is set to TRUE
   and
2. https://example.com/post/test when canonifyurls is set to FALSE

Link 1 exist , link 2 no .

If I let canonifyurls set to TRUE , then there are problems like : with docdock theme SLIDE is not working anymore

So I can see, it is HUGO himself who write the bad or good URL , with canonifyurls FALSE , subdomain is GONE

And you say it is not a bug ?

[jmooring]

This issue should have been closed last year. See comments from @davidsneighbour.

Not all themes are created equally. For example, some will fail dismally when serving from a subdirectory, while others perform perfectly.

Please use the forum (https://discourse.gohugo.io) for questions and troubleshooting. We prefer to use GitHub for verified bugs and vetted enhancements. Thanks.

[id027102]

Unbelievable that you cannot accept there is a bug !!!

When triing to use canonifyURLs hugo crash with : canonifyURLs is an unexported field of struct type page.Site

Check it yourself as follow , there is no THEME ,one markdown line and only one INTERNAL template used.

Check it your self .Here is how :

1. hugo create new site check
2. adapt config.toml with baseurl = "http://example.org/hugo/
3. cd to check/content create a file this.md with following content

---

---

[this](/this)

4 cd to layout, create _default directory
5 cd to _default
6 create file single.html with content

	{{ .content }}

7. Run hugo server
8. goto your site http://localhost:1313/hugo/this
9. Rollover "this" and check url ==> http://localhost:1313/this
10. Now modify config.toml by adding canonifyURLs = true
11. Rollover again(after saving/restarting) ==> http://locaalhost:1313/hugo/this

N.B.
Using {{ .Site.BaseURL }} print the baseurl
But with {{ .Site.CanonifyURLs }} hugo crash with :
canonifyURLs is an unexported field of struct type page.Site

So you CANNOT use CANONIFYURLS in THEME

[jmooring]

@id027102

This is the list of site variables that you can access from a template:
https://gohugo.io/variables/site/#site-variables-list

.Site.CanonifyURLs is not, and never has been, on this list.