Unable to configure imagesName and use webp

[kachkaev]

👋 I'm using next-optimized-images with the following config:

{ imagesName: "[name].[ext]?h=[hash]" }

All works well and I'm getting images paths like http:https://localhost:3000/_next/static/images/something.jpg?h=aacf4dd62f3618484aa2e017041bb9f2. Having hash as a GET param is allowing users to avoid 404 pages if the images change and the app is rebuilt. For instance, if google indexes logo.jpg?h=abc and then the URL becomes logo.jpg?h=def, the logo in the search results is still a valid image. The only thing I have to worry about with this config is the uniqueness of paths, but that's a different story.

After trying webp-loader with ?webp / <picture> / <source> / <image> I've noticed an odd glitch.

Instead of getting something.jpg?h=xyz and something.webp?h=zyx for require("./something.jpg") / require("./something.jpg?webp"), the output paths are something.jpg?h=xyz and something.jpg?h=zyx.webp.

Unsetting imagesName in the config solves the issue by turning paths into something-xyz.jpg and something-zyx.webp, but that's not quite what I'm after.

What makes the URL be something.jpg?h=zyx.webp and not something.webp?h=zyx? How to overcome this?

[cyrilwanner]

Hi @kachkaev, thank you for creating this issue!
Sorry for the late reply, I didn't have much time in the last few weeks..

I just published a patch (v2.3.2) which solves this problem.
When implementing the webp feature, I totally forgot that you can also have a querystring in your filename and just appended the .webp extension to the end of the string (367305f). Your use-case makes total sense and it is now fixed.
Could you maybe quickly double-check if it also works in your project as expected?

[kachkaev]

Many thanks for the fix @cyrilwanner! All works in v2.3.3! The URLs for a jpeg / webp for that jpeg are something.jpg?h=xyz / something.jpg.webp?h=zyx 🎉