Problem with Hero Image

13

In your site configuraiton, the baseURL is:

http://localhost:1313/hugo-blank-theme-v3/

This image URL:

/images/avatar-musk.jpg

Resolves to:

http://localhost:1313/images/avatar-musk.jpg

Which is wrong. Hence the repeated advice to understand relative vs. absolute URLs.

It needs to resolve to:

http://localhost:1313/hugo-blank-theme-v3/images/avatar-musk.jpg

So you have two choices:

1) Change the URL to /hugo-blank-theme-v3/images/avatar-musk.jpg. This is a terrible idea, because your image will break if you change the baseURL.

2) Specify a URL without a leading slash: images/avatar-musk.jpg, and use the relLangURL function to properly resolve the URL to your baseURL.

We’ve had this conversation before…
https://discourse.gohugo.io/t/how-deploy-hugo-website-on-gitpages-url-problem/45883/6

{{ with .Site.Params.authorImage }}
    <img src="{{ . | relLangURL }}" class="author-image">
{{ end }}
1 Like