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.
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.
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.
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 = 'https://ct2k.gitlab.io/test_site/'
Second, a URL without a leading slash is always relative to the current page, so this will only work on the home page:
src="icons/github-mark-white.svg"
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:
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 https://www.example.org/ or /. Finally, I ran hugo server -D --watch --verbose but there are no errors other than a warning for verbose soon to be deprecated.
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.
git clone --recurse-submodules https://gitlab.com/ct2k/test_site
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 127.0.0.1)
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/ ?
