vue.jsimage-processingnuxt.jswebpnuxtjs2

Nuxt Images doesn't convert images


I'm using Nuxt 2 and Nuxt Image (static provider) to generate srcset and WEBP format from my images. I use the following component in my markup:

<nuxt-picture :src="srcStringVariable" alt="" sizes="medium:66vw large:46.2vw huge:40.788vw" :imgAttrs="{ loading: 'lazy' }" />

After running nuxt generate and looking at the generated HTML file I see the expected result. Nuxt Image created the picture tags and references the generated files in different sizes and formats.

<picture>
    <source type="image/webp" srcset="/_nuxt/image-0933bc.webp 828w, /_nuxt/image-e8832f.webp 300w, /_nuxt/image-a9aa4c.webp 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px"> 
    <img src="/_nuxt/image-a8dee0.jpeg" srcset="/_nuxt/image-ed5284.jpeg 828w, /_nuxt/image-cb0218.jpeg 300w, /_nuxt/image-a8dee0.jpeg 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px" alt="" loading="lazy">
</picture>

Now to my problem.: If I'm running nuxt start and checking the source code it looks like this in the dev tools:

<picture>
    <source type="image/webp" srcset="image.jpg 828w, image.jpg 300w, image.jpg 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px">
    <img src="image.jpg" srcset="image.jpg 828w, image.jpg 300w, image.jpg 800w" sizes="(max-width: 920px) 90vw, (max-width: 1200px) 25vw, 800px" alt="" loading="lazy">
</picture>

The sources all reference the same original image. This also happens when I'm deploying this to Netlify. Is this expected behaviour and I'm just not getting the point of Nuxt Image? Is there something wrong with my settings or markup?

My nuxt.config.js file has the following relevant settings:

export default {
  target: 'static',
  ssr: true,
  buildModules: ['@nuxt/image'],
  image: {
    provider: 'static',
    staticFilename: '[publicPath]/[name]-[hash][ext]',
    screens: {
      tiny: 460,
      small: 720,
      medium: 920,
      large: 1200,
      huge: 1600,
      full: 1900,
    },
  },
}

Would be really helpful If anyone with Nuxt experience could try to explain this behaviour to me. The documentation of Nuxt Image is pretty limited in my opinion.


Solution

  • You're using <nuxt-picture/> and it should be <NuxtPicture/>