nuxt / nuxt/image

`nuxt generate` when an image is inside a dynamic component

Open
#1,865 0 comments 0 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

When using a static generated Nuxt deployment, i.e. nuxt generate, images which are inside dynamic components e.g. <component :is="getComponentName" /> aren't created and have no counterparts generated inside .output/public/ipx.

I haven't created a minimal reproduction because I've lost a fair chunk of my work day to this, but I have been testing within my project repo(s) and I'm confident that is the cause of the missing image issue I've been debugging today.

If an image is only used at a given size inside a dynamic component, the generate script doesn't seem to pick it up.

If for instance you reference the same image file at the same sizes outside of a dynamic component and inside a dynamic component, the image will be fine inside the dynamic component because it's already been generated in the context which the generate script has picked up.

I've tested this with ipx (both as explicitly specified in Nuxt config, and as default) and ipxStatic providers. I can't say for sure whether it's related to that provider but I suspect it is.

Forgive me if this exact scenario is already logged, I can see a lot of open issues with many overlapping terms.

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 by reproducing the issue with nuxt generate, an image used only inside a dynamic <component :is="getComponentName" />, and the ipx or ipxStatic provider. Compare the generated image files under .output/public/ipx with the image references, and consider the issue done when images used only in dynamic components are generated correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.