Placeholder support
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
Basic placeholder property is currently supported for <NuxtImg> (via #477).
Usage: This will auto-generate a URL from same source and 10x10 dimensions:
<nuxt-img src=".." placeholder>
It is also possible to give a custom placeholder (data)URL as a string or an array [width, height, quality] to customize URL generation behavior.
The original image will be loaded during hydration and after mounted.
Future enhancements:
- Fetch and inline placeholder as
data:url - Support smoother blurry versions when possible (depends on provider)
- Start loading images in parallel to hydration.
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 existing placeholder behavior described in this issue and read the implementation introduced by #477. The issue lists three possible future enhancements without selecting one, so define the target and acceptance criteria first; completion should include focused behavior or tests demonstrating the chosen enhancement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100