Get the image size on the server for layout optimizations and calculations
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
In order to do some necessary image placement calculations, we need to get the image size on the server in nuxt/content articles. But I could not find any way to do this. The $img.getMeta method isn't reliable and doesn't seem to work (returning width: 0, height: 0). It is essential that we have the dimensions on the server already, and we don't need to have it on the client side.
- When you need to place two images next to each other, giving them the same height, without cropping one of them. Then you need to do some calculations to calculate the height of both images.
- Also just for optimization, adding width and height attributes to images is required to prevent any layout jumping.
This seems such a basic thing to do, but I have searched for hours and could not find any solution.
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 by tracing how $img.getMeta is implemented and how image metadata is handled for nuxt/content articles during server rendering. Reproduce the reported width: 0 and height: 0 result, then define completion as reliable server-side dimensions that can support image layout calculations and width and height attributes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100