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 !

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/image/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions[bot]]

This issue was closed because it was open for 7 days without a reproduction.