relURL not always outputing URL

support
1

<div style="background-image: url('{{ "/img/principal.jpg" | relURL }}');">

outputs:

<div style="background-image: url('/img/principal.jpg');">

But

<img src="{{ "/img/icon-form.png" | relURL }}">

Outputs:

<img src="../../img/icon-form.png">

The image is correct, the inline style is not.

config.yaml:

relativeURLs: true
canonifyURLs: false
uglyurls: false

Why is this happening?

Thank you!

2

More information is needed to troubleshoot your issue. Please read Requesting Help and update your post. :slight_smile:

3

I’m running this on version 0.46

The weird thing is I’m getting this difference in behavior on the same partial.

This is a custom theme, but unfortunately I can’t really share it (intranet site).

Can you at least confirm that this is not the normal behavior? Meaning that the relURL output should have the same root.

Thanks

4

Is your Hugo site published in a sub-directory of the intranet?

5

Yes it’s in a subdirectory, but what’s strange is that the relURL output is different for two different things on the same page.

6

In Hugo relURL is relative to the root of a project. Since your site is published in a sub-directory of the intranet Hugo cannot find that asset.

I recommend that you remove the following settings from your config

relativeURLs: true
canonifyURLs: false

The above settings are doing opposite things. There is no need to have them.

Whenever you create a link to an asset in your templates do it like so:
<img src="{{ "img/icon-form.png" | absURL }}">

Also take care not to use a forward slash ‘/’ in the beginning of these links.
Whenever a link begins with a forward slash Hugo turns it into a relative link and absURL has no effect.

Please do the above and let me know if this fixed the issue.

7

The production site is on its own domain, and it does work as expected there with

relativeURLs: false

The pre-production is in a subdirectory and I can’t really do anything about that so that’s not a solution for me.

I still don’t understand why relURL behaves differently depending on the HTML tag in which it’s placed.

In the original snippet you’ll notice that both assets are in the same exact directory. Why would one be found and not the other?

Thanks

8

It’s difficult to say without seeing the project.

I would guess that since you call that image as an inline style the context is different.

However I am not familiar with all the intricacies of the go-html package.

That is a question for the Dev team

CC / @bep @moorereason