Shortcode does not copy image

support
1

I am having problems with my shortcode.
I’m also having problems with the figure shortcode.

It took me a while to figure this out.
If I delete the docs folder (production), then I know if the hugo server is copying the image to the production. If I used the img methods to display the image, then it gets copied to the docs folder and works. If I don’t delete the docs folder and change the code back to use the short code or the img-with-caption shortcode, (same thing), then it will indeed find the file (because it was copied there).
if I delete the docs folder and restart the server, it will not work again becuase hugo does not push it to the production (docs) directory.

Here is some MD page code.
Both of these will not copy the image over:

{{<image-with-caption src="/images/IMG_20180606_190629-1024x768.webp" caption="Garden View.">}}

{{< figure src="images/IMG_20180605_075327.webp" title="Rainbow" >}}

Here is the shortcode

<!-- layouts/shortcodes/image-with-caption.html -->
<figure>
    <img src="{{ .Get "src" | absURL }}" alt="{{ .Get "src" }}">
    <figcaption>{{ .Get "caption" }}</figcaption>
</figure>

Lastly, If I use the generic image function to display in my MD page code, it will work just fine and be copied over to the docs dir.

{{<img src="/images/IMG_20180605_075327.webp">}}

Rainbow

If I were to use the original code for the figure or the image-with-caption shortcode shown in the beginning of this post without deleting the docs dir… after using the img code directly… and then replacing that code with my shortcode… or figure., then it will find the file and display it.

So the issue is that the HUGO server is not copying the file into production to find it.

My project is located here: is here: GitHub - dhammacakka/americanmonk: stub page until this gets fixed
example page… (rainbow) is here: A Walk In The Gardens | American Monk: Life with Buddha, Dhamma and Saṅgha

2

Put you images in static/images or refer to them with resources.Get if you want to keep them in assets. Read up on Hugo pipes and on vient organisation.
As this has be been discussed often here, searching for “image static” might give you additional pointers.

3

Yes… that did the trick… I’m quite new to the HUGO world
Plugged it into gpt for a new prompt and it worked as expected… learned something new that
Resources.Get is needed for Resources…
I guess img seems to work all the time.

I originally had all my images in the static folder which worked well, but I wanted to reduce the load times which were slow. I moved to the assets so I can use HUGO resize if needed.

Below is the revised function that works:

{{/* image-with-caption.html */}}
<figure>
    {{ $src := .Get "src" }}
    {{/* Try to fetch the image as a page resource */}}
    {{ $image := resources.Get $src }}
    {{ if $image }}
        {{/* If found, it's an asset that can be processed */}}
        <img src="{{ $image.Permalink }}" alt="{{ .Get "caption" }}">
    {{ else }}
        {{/* Fallback to using absURL for static images */}}
        <img src="{{ $src | absURL }}" alt="{{ .Get "caption" }}">
    {{ end }}
    <figcaption>{{ .Get "caption" }}</figcaption>
</figure>