Linking images/resources from homepage layout template?

support
1

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?

2

What is the value of your baseURL?

3

https://agriculturaljusticeproject.org/toolkit-doks/

4

Also I tried using the relref function, but I’m clearly not getting that right either: <img href="{{ relref . "/images/ajp-logo.svg" }}"> Throws an error.

5

You are serving your site from a subdirectory.

Assumin the image path is static/images/a.jpg use any of:

<img src="/toolkit-doks/images/a.jpg" alt="">
<img src="{{ "/toolkit-doks/images/a.jpg" }}" alt="">
<img src="{{ "images/a.jpg" | relURL }}" alt="">
<img src="{{ "images/a.jpg" | relLangURL }}" alt="">   <-- recommended

There is no need to ever use .Site.BaseURL in a template.

1 Like
7

1m

Thank you, this answer makes a ton of sense. I’m still getting no image, even after trying other images and image formats, which makes me wonder if there’s a bug or quirk in the Doks theme itself. When I’m in the local development environment serving a site with a baseURL with a subdirectory, I expect the local address to be localhost:1313/subdirectory. With Doks that address returns a 404, and the site serves up at localhost:1313.

8

It’s difficult to determine what’s happening without access to your project repository.

9

Yes, sorry, it’s not in a public repo.