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.

[Timer]

@neilpalima we're landing a change to <NextImage /> right now that'll allow you to specify various layouts for your image! See #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 /> ?

[gregkonush]

it would nice infer width size if the height prop was passed and the opposite way as well

[leerob]

One idea: we can read the width and height with the Node package image-size. I used this package to automate adding widths and heights to my images.

Maybe it's possible to use this at build time, assuming it doesn't negatively affect build time with lots of images.

[moaaz-bhnas]

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 ?

@Nicoowr I like the idea, but won't a custom wrapper require loading the image to get its aspect ratio and do the calculation? which means loading the image twice everytime an image needs to be displayed.

[modbender]

I was checking to open a issue and found this.
What I want is, supposedly I give only width, I want the height of it to be calculated automatically according to the original image width and height and vice versa. Basically I don't want to lose aspect ratio of the image. I hope this is also a feature.

[joaogarin]

Same here, it would be nice that the next image works as a normal img tag so that you can specify for example a height and by setting width auto or not set have it use the normal image ratio (like an img tag does). For now in such cases it is not possible to really use the image component =/ as seems that when you don't set either height or width you have to use layout fill which is a different use case. I do understand the potential for layout shift but we do have code that is used for different images (e.g. a logo) that we know shouldn't have more than a certain height but have the width calculated dynamically (so that it works for different logos ratios)

[7ruth]

Was struggling with keeping aspect ratios of my images, this is what I ended up using:

<div
  style={{
    height: '250px,
  }}
> 
  <div
      style={{
        position: 'relative',
        maxWidth: '100%',
        height: '100%'
      }}
   >
      <Image
          src={'./images/001'}
          alt={'picture of a sunrise'}
          layout="fill"
          objectFit="contain"
          quality={100}
      />
  </div>
</div>

[advantiot]

@7ruth Your solution is a terrific workaround, thank you. Except, I needed to add a width: '100%' as well to the outermost div otherwise the image would not show. Am I missing something?

[awareness481]

Could this issue be closed so there's no confusion? For anyone reading this, this feature has been added in Next 11 https://nextjs.org/blog/next-11#automatic-size-detection-local-images

cc: @leerob