Dynamic image support

[nazmulfahim]

Describe the feature you'd like to request

In a dynamic app where images can have different width and height. for example I may have posts from different users where they upload images of different size, width, height and extension. nextjs current Image component requires a numeric value of width and height. if I set the height to something it causes most of the images to show inappropriately. in other words if I set the image width and height to 500 and original image width is 500 but height is 700 it makes the image looks odd.

Describe the solution you'd like

Remove the numeric value requirement for Image component. if possible make sure Image components automatically detect intrinsic values.

Describe alternatives you've considered

I don't have any alternative solution.

[surjithctly]

From Next 11, Next.js automatically calculates width and height if you import it like:

import SomeImage from "/public/img/img.jpg"

But yes, it won't work with user-uploaded images. You have two options right now.

1.dynamically get width and height of images and add it to the <image/> component.
2. layout="fill" does not require width and height. Use it and also add objectFit="cover" so it will be always fit on your preferred size.

Also, the new w3 standards recommend adding width and height to an image, so browsers can repaint it easily without cumulative layout shift.

[nazmulfahim]

Thanks. But it would be nice if nextJS automatically calculate width and height of dynamic images.

[nazmulfahim]

ObjectFit also sets the image position absolute which cause the image to take all the space. is there any parent element property to make sure objectFit only takes parent element's width and height?

[surjithctly]

Yes, would be a nice feature, but I'm not sure it will happen or not.

You have to add relative to the parent as well. So it will fit nicely.

[nazmulfahim]

Thanks did that and worked.

[surjithctly]

You can close this issue

[nazmulfahim]

I will wait for the core member to see this because the main issues isn't solved yet. It will be better to nextjs automatically calculating width and height of images from all source.