Can not access images from assets folder

This is probably just a small detail I am missing, I tried to follow the documentation for this but somehow this does not work.

I am working on a website with a custom theme. The website can be found here. I try to render an image from the asserts directory as shown here.

Line 16:

{{- $page := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID }}
  <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <div class="container-fluid">
      {{ partial "header/brand.html" . }}
      <button
        class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
        aria-expanded="false" aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      </div>
    </div>
  </nav>
{{- end }}

{{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    <li class="nav-item">
      <a class="nav-link" aria-current="page"
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ or (T .Identifier) .Name | safeHTML }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
  {{- end }}
{{- end }}

I provided the custom brand.html file here :

<a class="navbar-brand" href="https://www.irs.uni-stuttgart.de/" target="_blank">
  {{ $image := resources.Get "images/unilogo_schriftzug_white.png" }}
  <img src="{{ $image.RelPermalink }}" width=200 height=auto>
</a>

However, this only works if my images directory is inside the assets directory of the theme. In any other case it can not find the image and the website build fails with an error like this:

ERROR render of "taxonomy" failed: "/home/rmueller/Software/sat-sw-website-hugo/themes/minimal-theme/layouts/_default/baseof.html:8:7": execute of template failed: template: _default/list.html:8:7: executing "_default/list.html" at <partial "header.html" .>: error calling partial: "/home/rmueller/Software/sat-sw-website-hugo/themes/minimal-theme/layouts/partials/header.html:1:3": execute of template failed: template: partials/header.html:1:3: executing "partials/header.html" at <partial "menu.html" (dict "menuID" "main" "page" .)>: error calling partial: "/home/rmueller/Software/sat-sw-website-hugo/themes/minimal-theme/layouts/partials/menu.html:16:9": execute of template failed: template: partials/menu.html:16:9: executing "partials/menu.html" at <partial "header/brand.html" .>: error calling partial: "/home/rmueller/Software/sat-sw-website-hugo/layouts/partials/header/brand.html:3:21": execute of template failed: template: partials/header/brand.html:3:21: executing "partials/header/brand.html" at <$image.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink
Built in 458 ms

Shouldn’t this also work for the asserts directory of the website? Am I missing some detail?

Kind Regards
Robin

When mounting a directory to archetypes, assets, content, data, i18n, layouts, or static you must include the default mount.

[[module.mounts]]
  source = "assets"
  target = "assets"
[[module.mounts]]
  source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
  target = "assets/js/bootstrap.bundle.min.js"

https://gohugo.io/hugo-modules/configuration/#module-configuration-mounts

When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.

Ah, thanks for the quick reply, that solves the issue!

I was following Building a static website using Hugo & Bootstrap - Part 2 where this was not an issue… I suppose not ignoring the default mounts per default even if other mounts are added is not an option?

We have had this discussion before; if we always added the default mounts, there would be no way to not mount these … Which would not be great, esp. when mounting random GitHub repos that’s having a content directory that you really don’t want.

The current behaviour works the way it does to preserve backward compability with when we didn’t have a mount config.

2 Likes