Images will not generate when using alt presets in nuxt build.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
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 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.
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked repro and compare nuxt build with nuxt build --preset=cloudflare_pages, then inspect src/module.ts around line 169 and the nuxt.config.ts provider settings. Determine the intended behavior for prerendered images with non-node presets and verify it against the reported NuxtPicture cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100