Next.js: Proposal: NextImage should automatically determine width/height for local images

[Timer]

Feature request

It'd be really cool if NextImage automatically configured width and height for local images, as well as automatically hashing the image.

Describe the solution you'd like

import Logo from "../logo.png";
import Image from "next/image";

// Logo = { src: '<basePath>/_next/media/logo-<hash>.png', width: 200, height: 150 }
<Image src={Logo} alt="Vercel" />

Describe alternatives you've considered

N/A

Additional context

Currently, you have to manually set the width and height for a local image. Plus, the image paths aren't statically verified like an import would be.

[neilpalima]

This is a reason why I cannot use next/image since I need to provide the width and height. It will be great if it can be used with using css width and height (ex. value of 100%) or something similar.

[agcty]

This is a reason why I cannot use next/image since I need to provide the width and height. It will be great if it can be used with using css width and height (ex. value of 100%) or something similar.

You actually can with the "unsized" property

[neilpalima]

@agcty I tried that but got a not good result.

[agcty]

@Timer One thing that might be possible is probing for the image dimensions of the remote or local resource without downloading it. I read something about this several weeks ago and it seems a perfect use case for this. If no width and height are set and unsized is not set as well, the image component could probe the dimensions and populate width and height automatically.

I can dimly remember that HTTP3 will make this really easy but not entirely sure. For reference there's a library that does something similar: https://github.com/nodeca/probe-image-size/

[agcty]

@agcty I tried that but got a not good result.

What did you try and what was the result?

[Timer]

@neilpalima we're landing a change to <NextImage /> right now that'll allow you to specify various layouts for your image! See https://github.com/vercel/next.js/pull/18491

[Nicoowr]

@Timer I don't understand how #18491 is solving the issue tackled by the proposal? 😅 What I'd expect is that if one provides width=200px, <Image/> will determine height by itself? Or as a temporary solution, could I use a custom wrapper which reads the dimensions of my image, calculates the missing dimension and injects it to <Image /> ?