Hugo not reading webp images (possible bug)

support
1

Hello!

I have a “.webp” image in my assets folder that keeps returning 404.

The thing is the image was fine just two seconds ago. I did nothing, changed nothing. Simply went for a bit, then came back, hit reload, that’s it. No more .webp image.

It was displaying fine before that (with a <picture> element and even with a img element)

I can’t seem to figure out what changed, since I didn’t touched anything.

I went on and added an example webp image right from the google servers, thinking “oh well, maybe it was something that happened when I converted the image”, but no. Still doesn’t shows the image.

If I link the image externally (as with http://), it works. But if the image is inside the assets folder, it doesn’t.

Funny thing is, it was working just a moment ago, without me doing anything funky, anything strange, anything at all, it now refuses to show ANY .webp image, no matter how many times I restart the server, --gc, --ignoreCache or whatever, it doesn’t shows .webp images.

This does not appears to be an issue with the code itself, but with the server (since if I try to add any .webp image it won’t work, as it did a moment ago)

I’ve tried reinstalling Hugo, and the error persists.

Anyone else having this issue?

Steps to reproduce: link a .webp image from the assets folder, then go for coffee, wait two minutes, then come back.

image

As you can see, the server passes it as text/plain instead of webp.
The 1.webp image you can see there comes from google.

If I save the same image (1.webp) and try to load it from my assets folder, Hugo passes it as text/plain and the same thing will happen.

I even added


[mediaTypes]
  [mediaTypes."image/webp"]
  suffixes = ["webp"]

But still reads it as plain! ¯\_(ツ)_/¯


### LE UPDATE ###
Found the bastard.

I am accessing the image through a shortcode (code below).

My steps are these:

  1. Add a .jpg image to my /assets/featured/ folder
  2. Run a node script (webp.js) that creates the .webp image there, in the same folder.
  3. Call a shortcode for the .jpg, which adds the picture element with the .webp alternative.

Pretty straightforward and simple. This is the call:

{{< img src="photo.jpg" title="" >}}

My shortcode handles the rest:


    {{ $base :=  print .Page.Section }}
    {{ $path := .Get "src" }}
    {{ $url := print $base "/" $path }}
    {{ $image := resources.Get $url  }}

    {{ $image_ext := path.Ext $image }}    
    <br>
    <br>
    {{ $image_webp := replace $image.Permalink $image_ext ".webp" }}
    
    <p class="{{ .Get "class" }}">
        <picture>
            <source type="image/webp" srcset="{{ $image_webp }}">
            <source type="image/jpeg" srcset="{{ $image.RelPermalink }}">
            <img src="{{ $image.Permalink }}" alt="{{ .Get "title" }}" class="img-fluid {{ .Get "class" }}">
        </picture>
        <span>{{ .Get "title" }}</span>
    </p>

Works like charm. The .jpg image shows up with the .webp alternative, but as you read before, it stopped working out of nowhere.

To make it work again, I simply fiddled with the shortcode call, meaning…

I changed this:

{{< img src="photo.jpg" title="" >}}

To this:

{{< img src="photo.webp" title="" >}}
                   ^ le sucker

And it worked! Then, I changed it back to “.jpg”, and guess what? It is still working!

Now… this is only one page. If it suddenly stops working again I can’t start changing 400 shortcode calls… thankfully, it appears that when I make the change, the .webp files start working everywhere across the site.

But something’s definitely off in here–and it ain’t my code.

Granted, I’m not a coder, but I’m pretty sure this isn’t because of my spaghetti code. I tried with other two image shortcodes. Same result.

Every time one adds a .webp image into the assets folder, same thing happens.

Now, the weird thing is that the same behavior also happens with the .jpg image in the folder.

That’s right! Each time I generate the .webp, the shortcode stops working for .jpg images.

If I change the shortcode call back and forth from .jpg to .webp, it starts working again.

Something’s off with liveroad, maybe, IDK. Maybe it doesn’t picks a newly generated .webp image in the assets folder (and even screws up with reading the existing .jpg images there until it “refreshes”, somehow)