nuxt / nuxt/image

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

Open
#1,823 6 comments 2 reactions 0 assignees View on GitHub

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.

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.