image: Nuxt Generate does not produce images

For what it’s worth I was able to get it working on local dev with “npm run generate” and on Vercel with the following config:

buildModules: [
    // Next Image module https://image.nuxtjs.org/components/nuxt-img
    ['@nuxt/image', {
        provider: 'static',
        dir: "assets/images",
    }],
],

Using “Nuxt”: “^3.6.5” and “@nuxt/image”: “^1.0.0-rc.1”, nuxt generate does not seem to generate static images. In nuxt.config.ts ssr: true,. Trying to set image: { provider: 'static' } produces an error on the frontend: Error: Unknown provider: static.

Locally everything works, here is an example of the file produced: /_ipx/w_40/img/background/plain.webp. The _ipx folder is not generated in .output folder after running nuxt generate.

@farnabaz Replicating my code on template.nuxtjs.org resulted in the module working how it should. After going through the code and trying to spot differences it looks like having ssr: false set in the nuxt.config.js was preventing nuxt/image from running correctly during yarn generate. When running yarn create nuxt-app <project-name> and selecting static as the target mode, this flag is added to the config by default. If it’s not a bug, this might need a warning added in the documentation for the module as I couldn’t find information about it currently.

I can confirm as per @danielroe 's suggestions you need to have both ssr: true and target: static set in your nuxt.config.js for this to work. (Confirmed to be working with Vercel, Netlify and Layer0 and local development for static content.)

Someone should document this. (Shuffles away into the darkness).

Would you try again with 0.4.8 and prepare a reproduction if it’s still not working? 🙏

Will this issue still exist when migrating to Nuxt 3 ? I would love to benefit from Nuxt Image with a generated site but most providers like Cloudinary are really pricy, will there be a way to work with Nuxt Image and locals images in Nuxt 3 (ssr: false/target: static) ?

BE CAREFUL WITH CONDITIONNAL RENDERING:

I used v-if for a component with NuxtImg inside of it, when i just change to v-show it generates my img inside ipx folder… maybe it’s because v-show generates the DOM of my component but not the v-if.

Also i used NuxtImg inside LToopTip of leaflet and it doesn’t work as well (inside v-for) so i just change to default html and it works (but no webp compression with nuxt image conf so just do-it-yourself -> https://squoosh.app/ works well)

Info :

• images inside /public/image folder
• use nuxt generate because of static website
• “nuxt3-leaflet”: “^1.0.12”
• “nuxt”: “^3.8.0”
• “@nuxt/image”: “^1.0.0”

Maybe related problem: #689

The key for me was provider: 'static' and then images got generated, even from remote sources.

Would you try again with 0.4.8 and prepare a reproduction if it’s still not working? pray

We saw the same issue, as described above and after updating to 0.4.8 is works without setting provider or `dir. At the end of the generate-process it shows a list of all generated images:

✔ Generated route "/last-url"                                                                                                    14:46:42
✔ Client-side fallback created: 200.html                                                                                      14:46:42
✔ Static manifest generated                                                                                                   14:46:42
✔ Generated static image dist/_nuxt/image/8a9175.png                                                              @nuxt/image 14:46:42
✔ Generated static image dist/_nuxt/image/374484.png                                                              @nuxt/image 14:46:42
✔ Generated static image dist/_nuxt/image/fca9e1.png                                                              @nuxt/image 14:46:43
✔ Generated static image dist/_nuxt/image/88ed36.png                                                             @nuxt/image 14:46:43
Done in 167.76s.

@danielroe This is a really cool feature to have, thanks for putting in the work!