nuxt / nuxt/image

Get the image size on the server for layout optimizations and calculations

Open
#457 1 comment 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

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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.