---
title: Test
date: '2025-08-07'
---
This is a test post.
This results in the following HTML
<figure>
<a href="/photo.jpg">
<img src="" alt="here is some alt text" loading="lazy" decoding="async" width="3000" height="1800">
</a>
<figcaption>here is a caption</figcaption>
</figure>
As you can see, most of it renders correctly, except the images themselves. There should be both a link to the original image and an optimised WebP image. The former is not generated (going to /photo.jpg just gives the 404 page). The WebP is apparently not generated, since the src attribute is empty.
What am I doing wrong?
I have this in my hugo.yaml, though I think it’s irrelevant here.
I did already fix one misspelling that caused Hugo to throw an error. Guess I should have thought to look for more. I like to manually type out code to make myself actually read it and not just copy-paste it.
I fixed the typos and now it works.
Thanks for the info on newScratch, I’m working on changing it now.
I tried making @irkode ‘s suggested modifications, and ran into errors. I reverted the file, stopped Hugo server, deleted public/ and resources/ and restarted the server, but now the linked image doesn’t exist. I’m getting 404 again. Not sure what’s going on, still testing.
check the value of $src and read the documentation about Resource methods.
$src is a resource object and here you evaluate that as string <a href="{{ $src }}">. The default conversion for a resource is to print the path which is /photo.jpg.
But you did not publish the resource before, so there’s no such file in your public folder.
… (my first test with the standard method published it there and and did not clean public in between)
to publish the resource you call the <a href="{{ $src.RelPermalink }}">. Check your public folder and the image is there.
Sorry for the inconvenience.
and this leads to @tyco comment about using a subfolder in assets. Or you will get all these images in your sites root folder.
general advice:
error checking/defensive coding is always a good idea. Being lazy at that part shifts problems to a later stage.
and it will help you to detect errors while testing out small snippets.
adding that later to a hundred lines of code with your mind on soime other topics, believe me is costly at the end.
I think with myself, I tend to focus on the one thing (why won’t it work when it did before?!) and forget to step back and think. This is the second time I’ve failed to do so on this issue today. {{ $url.RelPermalink }} does indeed work. I’ll have a proper read through the docs linked to by yourself and @tyco before moving on.
I will certainly put images and other resources in dedicated subdirs. I only put it in the root to minimise the mistakes the beginner that is myself could make on the first try.
Thanks for the advice, it’s very valuable to a novice like me.
Here’s what I have now. If you don’t mind I’d like to ask you if there’s anything else (either of) you would change before I mark the thread as solved.
