image icon indicating copy to clipboard operation
image copied to clipboard

Images will not generate when using alt presets in nuxt build.

Open saltytostitos opened this issue 8 months ago • 6 comments

Deployments have grown complex.

*** pre-edit *** Originally I was posting this because I was unable to get image rendering to work while using a non node preset in Nuxt. Looks like the problem now is that this problem only happens when relying on Nuxt Image defaults or applying providers locally to the <NuxtPicture /> tags. I'm going to post this anyway for discussion. Maybe I just didn't understand the docs clearly enough -- I was testing providers locally, I should have been testing them globally in the nuxt.config.ts

Env: NuxtHub (so my preset is cloudflare_pages or cloudflare-module). Nuxt Image 1.10.0 Nuxt 3.16.2

Disposition: Nuxt Build with prerendered pages (static with nitro server on host). Ideally i'm deploying with cloudflare-module (NuxtHub)

https://github.com/nuxt/image/blob/269830e001e146bf7ac7cd03196aee83ff55425f/src/module.ts#L169 seems to disable ipx if the preset is not node; however, I'm needing to pre-render all my images for static generation using Nuxt Build. I'm sure there is other logic around there with environments but changing this option was my check.

I put a quick repro together: https://github.com/saltytostitos/nuxt-image-bug.

✅ Running nuxt build generates all the responsive images. ☠️ Running nuxt build --preset=cloudflare_pages will not. ☠️ Adding a provider (<NuxtPicture provider="ipx" />) while using a non node preset will cause errors in the build. Also tried ipxStatic.

Image

All my example tests are using

<NuxtPicture src="/pic.png" alt="Image Here" quality="1" densities="x1" sizes="250px" />

*** pre-edit solution *** ⭐️ Always use ipxStatic when pre-rendering pages using nuxt build. ✅ Running nuxt build --preset=cloudflare_pages while setting my provider in nuxt.config.ts does not seem to apply the provider. Also tried ipxStatic

  image: {
    provider: "ipxStatic",
  },

Maybe this can help somebody else.

saltytostitos avatar Apr 22 '25 23:04 saltytostitos

Reading this it seems very similar to the issues I reported here: https://github.com/nuxt/image/issues/1759

Does this sound like the same kind of thing to you?

Smef avatar Apr 28 '25 17:04 Smef

Reading this it seems very similar to the issues I reported here: #1759

Does this sound like the same kind of thing to you?

Hard to say, I don't see a lot of information on it. Did you try changing the providers?

saltytostitos avatar Apr 28 '25 17:04 saltytostitos

Yeah, settings ipxStatic and a nitro config as well. Are your issues intermittent or do you always get the error?

Smef avatar Apr 28 '25 19:04 Smef

I'm using Nuxt Image with ipx-static on Cloudflare for my website: https://github.com/danielroe/roe.dev/blob/main/nuxt.config.ts#L54-L56

danielroe avatar Jun 26 '25 12:06 danielroe

Is there any way to get the source stack trace of the 500s on pages during the prerender process?

Smef avatar Jun 26 '25 14:06 Smef

Is there any way to get the source stack trace of the 500s on pages during the prerender process?

It seems we will get this with nitro v3 / nuxt v5: https://github.com/nitrojs/nitro/pull/3348

Until then my assumption is, that this issue eats dev-hours by the thousands daily.

codeflorist avatar Sep 12 '25 10:09 codeflorist