I’ve made a handful of straightforward mostly text-based hugo sites, but I’ve come upon a new puzzle with my current project: I’m tweaking the excellent Doks theme for use on a knowledge base, and while editing the homepage template (layouts/index.html), I just can’t figure out how to get the right path to resolve an image. I’ve read through the hugo docs on templates and page and site variables, to no avail. I’ve also re-read the docs on cross-linking and ref and relref and haven’t found a way to fix this. I’d welcome any help you can offer.
For reference, I have placed copies of the image file (ajp-logo.svg) in /static and in /static/images.
Here’s the code I’ve tried in the template, none of which has worked:
<img href="ajp-logo.svg" style="width:128px;height:auto;"> Server renders site, image resource doesn’t load.
<img href="{{ .Site.BaseURL }}/ajp-logo.svg" style="width:128px;height:auto;"> Server renders site, image resource doesn’t load.
I also tried to figure out how to use {{ .RelRef }} and {{ .Ref }} and different variations on that syntax trying to get it to work, but it only threw errors. I’m not understanding how to scope those variable in order to get me to the image, rather than to a page.
I have no trouble resolving images on the .md pages of the site, so I’m flummoxed. Any suggestions?