[BUG] img icon in header only renders on landing page

[LeonardAukea]

Assume that you reference an image icon in config.yaml like so:

  label:
    text: home
    icon: img/logo-icon.svg
    iconHeight: 35

It will only render on the landing page as relativeURL's are not used in the header.html partial:

hugo-PaperMod/layouts/partials/header.html

Lines 49 to 50 in 3bcafa0

	<img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo"
	height="{{- .Site.Params.label.iconHeight | default " 30px" -}}">

Therefore, you will end up looking for the file in the wrong location if you are on another site, as an example:

GET http://localhost:1313/posts/test/img/logo-icon.svg 404 (Not Found)

[adityatelange]

  label:
    text: home
--  icon: img/logo-icon.svg
    iconHeight: 35
  label:
    text: home
++  icon: /img/logo-icon.svg
    iconHeight: 35

I hope this should solve the issue.

[LeonardAukea]

```diff
  label:
    text: home
--  icon: img/logo-icon.svg
    iconHeight: 35
  label:
    text: home
++  icon: /img/logo-icon.svg
    iconHeight: 35

I hope this should solve the issue.

How will this prevent the following request to be made GET http://localhost:1313/posts/test/img/logo-icon.svg 404 (Not Found) ?

[danielfdickinson]

It will replace the link with http://localhost:1313/img/logo-icon.svg which since the logo is in /static/img/logo-icon.svg is where the logo should be.

[passw0rd123]

The leading slash resolves the issue as long as you have deployed the hugo website in the domain root.

Otherwise, if the website is served from a subfolder you have to add the subfolder also in the icon path.

baseURL: 'https://example.com/subfolder/'
params:
  label:
    icon: /subfolder/img/logo-icon.svg

[moomop]

Hi - I think the answer to this is to use absURL something like:

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f53ab52b..cc636598 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -46,7 +46,7 @@
             {{- if .Site.Title }}
             <a href="{{ "" | absLangURL }}" accesskey="h" title="{{ $label_text }} (Alt + H)">
                 {{- if .Site.Params.label.icon }}
-                <img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo"
+                <img src="{{- .Site.Params.label.icon | absURL -}}" alt="logo" aria-label="logo"
                     height="{{- .Site.Params.label.iconHeight | default " 30px" -}}">
                 {{- end -}}
                 {{- $label_text -}}

That works for me for base URLs with and without subfolders.

The suggestion above to add the subfolder in the icon path does work, but is inconvenient if you frequently want to change the subfolder (e.g. for deploying to a test site I specify a different baseURL using --baseURL on the hugo command line).

Note that absURL will only keep the subfolder in https://example.com/subfolder/ if the icon path doesn't start with a slash (so use something like icon: img/logo-icon.svg rather than icon: /img/logo-icon.svg. Otherwise absURL will generate a URL from the server root (i.e. won't include the subfolder)