When multiple large images are loaded at the same time, NuxtImg stuck at placeholder, (`img.decode` fails silently)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
Currently we're using img.decode when available https://github.com/nuxt/image/blob/67b40acbbeb0879412f02648263eb5d142af33a4/src/runtime/components/NuxtImg.vue#L152, but it seems like if we have many NuxtImg created at the same time, loading somewhat large images (my test setup is 10x ~1MB images), some image.decode() will fail with EncodingError: The source image cannot be decoded., it is also silent and does not logged to console by default if we don't add @error handler, leaving the images stuck in placeholder state if we do use placeholder.
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 in src/runtime/components/NuxtImg.vue around line 152, where img.decode is used. Reproduce the issue with about ten simultaneous ~1MB images and placeholders, then trace the behavior when decode raises EncodingError. Done means images do not remain stuck in placeholder state when decoding fails.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 67/100