Can't insert local images, but links work


I am trying to insert images located in my static folder (also tried assets) to use on my nav bar. The 3 images are nothing special, just .svgs of GitLab, etc. No matter what I do, all images result in the broken image picture. However, I can link an image from another website just fine. Not sure what I am doing wrong here… I have linked images in my websites many times before, but this is my first time using Hugo. Do I need to use templates to solve my issue? I looked at the image-processing documentation, but find it a bit confusing.

  • I am not using a theme.
  • I have tried both the static and assets folders.
  • I have tried relative and full paths:

This is the code inside my nav.html partial.

The first 2 (local) images are broken. The image linked from w3schools works.

    <ul class="icons">
        <img src="/assets/icons/github-mark-white.png" width="100px" height="100px">
        <img src="/static/gitlab-logo-600.svg" width="100px" height="100px">
        <img src="" width="100px" height="100px">

If you place a file in the static directory, it is published to the public directory when you build your site. Do not include “/static” in the path.

If you place a file in the assets directory, it will not be published unless you capture it as a resource with Get, GetMatch, etc. and then invoke Permalink, RelPermalink, or Publish.

1 Like

Thanks, that worked.

The only issue, which I kind of expected, is that the images only work on the index.html page. I guess for now I will have to hard code them every page, since I can’t grasp how to use templates. I tried a few things with range and the config.toml, but no such luck. Save that for another day.

1 Like

So what I thought was hard coding, didn’t actually work, though I don’t see why it would not work? The code above is inside the nav.html partial, but the images only show on the index.html page. On single or list pages, the images are broken.

I perused through a bunch of Hugo templates, trying to find examples how to do these social icons the “proper” way. Every template I checked out uses a bunch of JavaScript, custom CSS, and linking to icon packs like Font Awesome. This is both complete overkill for my simple website and way over my head.

I actually found a post by you, jmooring, tonight while trying to figure this out. I copied your code in the solution, but keep getting EOF errors. Is this code incomplete? I tried placing ``{{ end }}` statement where I thought appropriate, but I can’t get it to work.

Your solution is similar to what I was trying before I made this post. I made new social/icon entries in my hugo.toml, adding the name, URL, and image path. I then tried using range, resources.Get, and resources.GetMatch, the latter two of which I found in the documentation examples. No luck.


That is a diff file, not a template snippet.

Please share a link to the public repository for your project.

Hi again,

I should have picked up on that with the pluses and minuses, but I was tired.

Here is a link to my repo and the live site.

I spent this afternoon trying to simplify my site, using baseof.html and getting rid of all but one partial. Thought I might be able to solve the problem, but no luck. I have a feeling it’s something very obvious or I need to use templates.


You are using templates. That’s what’s in the layouts directory.

First, per the documentation, please terminate your baseURL with a slash:

baseURL = ''

Second, a URL without a leading slash is always relative to the current page, so this will only work on the home page:


Third, since you are serving your site from a subdirectory (test_site), the easiest way to resolve these hardcoded URLs in your templates is with the relURL function:

src="{{ relURL `icons/github-mark-white.svg` }}"
1 Like

Sorry for the confusion. I was using “templates” interchangeably with Hugo variables and functions.

I added the trailing slash and used the relURL function, and that solved my issue. Thank you!

The only problem I have now is that I can no longer display my website using hugo server. I get a 404 page not found. This happened before I made any of the changes. I tried clearing cache and cookies, as well as using a different web browser, but no luck. I also tried changing the baseURL back to or /. Finally, I ran hugo server -D --watch --verbose but there are no errors other than a warning for verbose soon to be deprecated.

There are a few FAQs that might be helpful:

I solved the issue. Hugo is launching localhost:1313 but it should be http://localhost:1313/test_site/. I’m not sure why that is because the path hasn’t changed locally, but it’s not a big deal. I just made a new bookmark.

Thanks again for all your help!

Can you share your site configuration?

Sure, my repo is still up. The path local path for my Hugo site is /home/ctk/my-website/test_site/. Let me know if you need anything else.

I did this:

git clone --recurse-submodules
cd test_site/
hugo server

And got this:

Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/test_site/ (bind address 

And saw this:

So, not sure what the problem was…

That’s what I see, too. Is there a reason it no longer uses localhost:1313? It does not bother me, just curious.

Yes… see your baseURL.

Right, but I also changed it back to the example, as well as / when I was troubleshooting the issue. Wouldn’t the baseURL only apply to my published site on GitLab and for hugo server, it would be overridden by localhost:1313 without `/test_data/ ?

No! Think about it…

Ok, thanks jmooring. Appreciate your help. I won’t waste anymore of your time.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.