I had working website which was made using Hugo but which had image caching issues. Every time I had to request users to clear the browser cache to reflect the updated images!

I found a great article, which provided inputs to solve the caching issues.

Classic challenge, new tool – addressing browser image caching issues with Hugo fingerprinting

As suggested, I have created a file entitled render-image.html under layouts/_default/_markup folder and added below code

<!-- layouts/_default/_markup/render-image.html -->

{{/* Gets a resource object from the destination of the image that is parent-with-child.png */}}
{{/* The parent-with-child.png image is specified in the markdown and must be available in the  */}}
{{/* asset folder */}}
{{ $image := resources.GetMatch .Destination }}

{{/* Calculate the fingerprint, add it to the name and get the Permalink is the full URL of the file */}}
{{ $image := ($image | fingerprint).Permalink }}

<img src="{{ $image }}"/>

Now, I am getting below error

template: _default/_markup/render-image.html:9:23: executing “_default/_markup/render-image.html” at : error calling fingerprint: can not be transformed

Note: I am using below theme

https://themes.gohugo.io/themes/mainroad/

I tried adding render-image.html under themes folder as well, but no luck