Nuxt Generate does not produce images

[dannyalder88]

Nuxt version: 2.15.3
@nuxt/image version: 0.4.4
target: 'static'

I have been using the module in dev mode with no problems. However, when trying to generate a static site using nuxt generate no images are produced by @nuxt/image and all images on the site 404. The generated image URLs point to _ipx/IMAGE_PATH but this is not in the dist folder of the Nuxt project.

I have tried with a fresh Nuxt project with only @nuxt/image added and get exactly the same issue. Running nuxt generate produces no errors in the CLI and the site builds without a problem. The images are just not generated.

Any help on this would be greatly appreciated.

[farnabaz]

Do you mind creating a reproduction sample using template.nuxtjs.org ?

[tusamni]

Having a similar issue publishing to Vercel.

[dannyalder88]

@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.

[oritwoen]

I confirm the same bug on Vercel.

[tusamni]

To be fair, I can't get it to work on "npm run generate" either, which is what Vercel is using to generate the site.

[oritwoen]

There is probably something wrong with the package here. At least I think so. I have tried 2 versions.

Vercel based on: https://github.com/nuxt/nitro-demo
Vercel based on: https://github.com/nuxt/vercel-builder

Neither the generated version nor the server version works with displaying images using this package.

nuxt/vercel-builder#548 ping @pi0 You have created this integration. Do you have an idea what could be wrong?

[tusamni]

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",
    }],
],

[tanc]

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

[shadow81627]

I might have a similar issue I am running nuxt generate on Vercel and it seems to be working fine but when I run nuxt generate and nuxt start I am only seeing the original image source urls rather than the generated urls. See my comment here for more details.

[danielroe]

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

[madc]

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!

[danielroe]

Great! 🎉

I'm going to close this issue as resolved but let me know if this issue reoccurs and I'll reopen.

[Billybobbonnet]

@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 confirm what @dannyalder88 spotted: if ssr:false is set, nuxt generate fails with external domains. As far as I can tell, it's not Vercel related.

[salv0]

Great! 🎉

I'm going to close this issue as resolved but let me know if this issue reoccurs and I'll reopen.

Hi @danielroe,

I am still facing this issue on 0.5.0

My configuration is:

ssr: false,
target: 'static',
buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/svg',
    [
      '@nuxt/image',
      {
        provider: 'static',
      },
    ],
  ],

I have the following code:
<nuxt-img src="/logo.png" class="w-auto h-8" />

and placed the logo.png in the static folder.

When I run yarn dev, the image is visible correctly, and the URL is src="/_ipx/logo.png"
but if I run yarn generate, there is no hint to logo.png in the logs and after yarn start I see a 404.
The src is the same also in this case.

This happens also if I deploy the app (currently using AWS Amplify).
Any idea?

[danielroe]

Make sure you set ssr: true. Turning off rendering page HTML (which is what ssr: false does) will mean Nuxt image is not able to process your images at generate-time. Or you can choose an alternative provider.

[michealroberts]

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).

[zdenekhatak]

You should also verify that the component inside which you use <nuxt-img/picture gets generated into the static .html files.

I mistakenly initialized the piece of code where I was using nuxt/image in the mounted() method and since this method never gets executed in the SSR version, /dist images were never generated. Once I moved the important logic to created() lifecycle hook, everything started working on the production static generated build.

[theolavaux]

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) ?

[garyo]

I'm maybe seeing the same issue? "yarn generate" on my dev machine works fine, and generates the _ipx/w_400 files. But running the same command in github ci silently doesn't generate any of the _ipx images. Must be something in my environment?

I'm using @nuxt/image-edge@1.0.0-27840416.dc1ed65. I do have ssr: true and target: static in my nuxt.config.ts.

[theoephraim]

@garyo - lots of similar issues reported around. Seems to happen when running on non-local envs, but have not been able to track down why

[jivygraphics]

Same issue here as @garyo, works on local but pushing to non-local the images are not built.

[LukaZeleznik]

Same issue here as @garyo here

[ganbayar13]

Same issue.

[kevinlaw91]

one possibility is that if you are implementing responsive design using vue3-mq, when creating static bundle the crawler did not detect the images that should be shown in other screen sizes and thus not included it in the final static bundle. This has happened to me. Hope this will help someone.

[ijklim]

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.

[samuel-litzler]

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

[henriquemarba2]

Do the following

Install:
package.json (devDependencies)
"@nuxt/image-edge": "^1.3.0-28493895.369b747",

Config:
nuxt.config.ts
...
export default defineNuxtConfig({
target: 'static', <- Leave it set to static and do not use SSR: false.
modules: [
'@nuxt/image-edge'
],
image: {
quality: 80,
screens: {
'xs': 320,
'lg': 1024,
},
format: ['webp'],
densities: [1, 2],
dir: 'assets/img' <<- Deixe sem /
},
})

And in your image call use:
<NuxtImg
src="/filename.png" <- observe que tem /
/>

And be happy!