NuxtImg not working on generate

[fabiovaz]

Create a new nuxt app: npx nuxi@latest init my-app

Go to new app folder: cd my-app

Install Nuxt Image yarn add @nuxt/image@rc

Put the module at nuxtconfig

  modules: [
    '@nuxt/image',
  ]

Put some image file in public/img/ I used /img/test.jpg

Edit your app.vue

<template>
  <div>
    My Image:
    <NuxtImg src="/img/test.jpg" format="webp" quality="80" />
  </div>
</template>

and try run yarn generate.

With yarn dev, everything works fine, the image shows at screen. ps: working fine with nuxt/image-edge

[EngineerMonkey404]

same issue for me

[lvbaiying]

I encountered the same issue as you, the first attempt fails, but the second attempt succeeds. However, in my case, setting format="webp" did not generate images in webp format.

[hugomejia]

Has anybody found a solution to this ?

In my case, I setup the format=['webp', 'avif'] in the image options in the Nuxt.config.ts file and also in the images itself. It actually works well during development I can see the Content-Type set as 'image/webp' despite the image having a JPG or PNG extension, which is good.

However when I built with npx nuxi generate and deploy to my live static hosting, then it does not work (I'm deployin to Firebase Hosting as a Static site). When I check the Content-Type on my live website i can see image/png or image/jpg as per the original file extension. Can some body please confirm if Nuxt Image works with Nuxt 3 with the npx nuxi generate for Static Sites ? Thanks !