Webp and resize query params together

Describe the bug Requiring an image with both resize and webp query params simultaneously didn’t work. I want to export my png image as webp and also resize the exported webp image to different responsive sizes. Is this a bug or that use case is not possible? Obs: Requires with just one param (?webp or ?resize&sizes…) works normally.

To Reproduce

1. Install packages:

npm install -D @bazzite/nuxt-optimized-images imagemin-mozjpeg imagemin-pngquant imagemin-svgo webp-loader responsive-loader sharp

1. Require image with both query params:

const myImage = require('~/assets/images/xxx.png?webp&resize&sizes[]=200&sizes[]=400&sizes[]=800')

1. Make available on template:

export default { data() { return { myImage } } }

1. So in template:

<img :srcset="myImg.srcSet" :src="myImg.src" />

Expected behavior So I expected this code render urls to webp responsive images:

<img srcset="/_nuxt/assets/images/xxx--200.webp 200w, /_nuxt/assets/images/xxx--400.webp 400w, /_nuxt/assets/images/faq-balao--800.webp 800w" … />

But I got links to png images:

<img srcset="/_nuxt/assets/images/xxx--200.png 200w, /_nuxt/assets/images/xxx--400.png 400w, /_nuxt/assets/images/faq-balao--800.png 800w" … />

Thanks!

[mmoollllee]

Seems like there is a new one incoming: herrstucki/responsive-loader#103 Hope to see this coming 😃 Thank’s for your work!

[rcpires]

Got it. Thanks @juliomrqz