Generating WebP images with nuxt-picture not working for static generated site (ssr:true,target:static)

[jakubferenc]

Nuxt version: 2.15.8 @nuxt/image version: 0.5.0 target: 'static', ssr: true, buildModules: [ ['@nuxt/image'], ], image: { provider: 'static', },

Using nuxt-picture with WebP type works in the dev mode. It generates images via _ipx. Here's a sample code from the dev mode that works:

This code (in dev mode)

  nuxt-picture.image.image-desktop(
    format="webp"
    quality="80"
    src="/images/xyz-header-large.jpg"
    sizes="mobile:100vw tablet:100vw desktop:100vw widescreen:100vw fullhd:100vw"
  )

will generate this code, which uses WebP images (in dev mode)

<source type="image/webp" srcset="/_ipx/images/xyz-header-large.jpg?w=768&amp;f=webp&amp;q=80 768w, /_ipx/images/xyz-header-large.jpg?w=769&amp;f=webp&amp;q=80 769w, /_ipx/images/xyz-header-large.jpg?w=1024&amp;f=webp&amp;q=80 1024w, /_ipx/images/xyz-header-large.jpg?w=1216&amp;f=webp&amp;q=80 1216w, /_ipx/images/xyz-header-large.jpg?w=1408&amp;f=webp&amp;q=80 1408w" sizes="(max-width: 768px) 100vw, (max-width: 769px) 100vw, (max-width: 1024px) 100vw, (max-width: 1216px) 100vw, 100vw">

However, when trying to generate a static site using yarn generate, the console output indicates that WebP images were created and indeed I can find them in _nuxt/image/ folder. But the generated static code does not link to WebP images, but uses the original "jpg" or "png" images instead.

Any help on this would be greatly appreciated.

[shanks25]

same issue, have you found the solution

[GuillaumeDgr]

Hi, Any update on this pls ? Many thks

[indifisher]

Also struggling with this.

[bropa]

Same problem here. I looked at the whole thing in Chrome dev-tools. Both variants (jpg/webp) are delivered from different folders: http://localhost:3000/_ipx/q_75&w_1920&f_jpeg/referenzen/placeholder-lrg.jpg http://localhost:3000/_ipx/q_75&w_1920&f_webp/referenzen/placeholder-lrg.jpg The folder for webp and jpg contains only jpg files. However, the file in the webp folder is much smaller, so they seem to have been treated differently.