Guys Why next image cannot take height | Next.js | Page 1

quartz bluff Jun 30, 2022, 5:45 PM

#

maybe layout="responsive" is what you're looking for? that would make it scale to fit the width of the container (like height auto) and the height and width attributes are only used for calculating the aspect ratio of the image. https://nextjs.org/docs/api-reference/next/image#height

next/image | Next.js

Enable Image Optimization with the built-in Image component.

cobalt tiger Jun 30, 2022, 5:48 PM

#

I have tried layout responsive, maybe I am using it wrong.

worldly halo Jun 30, 2022, 5:49 PM

#

Send a screenshot of your usecase

cobalt tiger Jun 30, 2022, 5:58 PM

#

Sure!

#

Next/Image approach.

#

     <section className="flex flex-col">
        {images.map((img) => (
          <div className="mx-auto" key={img}>
            <Image alt={img} src={img} width={'768px'} height={'1000'} />
          </div>
        ))}
      </section>

#

Output:

#

Screenshot_2022-06-30_at_11.29.25_PM.png

#

2.Plain html img tag with fixed width and height auto which is by default.

#

      <section className="flex flex-col">
        {images.map((img) => (
          <div className="mx-auto" key={img}>
            <img alt={img} src={img} width={'768px'} loading={'lazy'} />
          </div>
        ))}
      </section>

#

Screenshot_2022-06-30_at_11.31.11_PM.png

#

This is what I want, the images look not distorted as the previous image

quartz bluff Jun 30, 2022, 6:02 PM

#

what is the original width and height of the image?

#

looks like 1000px is not enough

cobalt tiger Jun 30, 2022, 6:04 PM

#

Here is the list of image if you want to try it.

#

If I use the images like this:

            <Image alt={img} src={img} width={'768px'} height={18000} />

#

They are distorted again

quartz bluff Jun 30, 2022, 6:06 PM

#

use the layout responsive prop

cobalt tiger Jun 30, 2022, 6:06 PM

#

They look way too tall

#

Screenshot_2022-06-30_at_11.36.13_PM.png

quartz bluff Jun 30, 2022, 6:07 PM

#

or try layout="fill" with objectFit="cover"

cobalt tiger Jun 30, 2022, 6:07 PM

#

            <Image alt={img} src={img} width={'768px'} height={18000} layout={'responsive'} />

#

I tried with layout responsive, they are not showin in screen

#

Screenshot_2022-06-30_at_11.38.30_PM.png

#

I have tried layout=fill and object fit cover.

#

           <Image
              alt={img}
              src={img}
              width={'768px'}
              height={18000}
              layout={'fill'}
              objectFit={'cover'}
            />

#

There is only one image that shows on the screen, its not scrollable

#

Screenshot_2022-06-30_at_11.40.16_PM.png

quartz bluff Jun 30, 2022, 6:11 PM

#

so you want them to all the same width but different heights?

cobalt tiger Jun 30, 2022, 6:12 PM

#

Yes, yes

quartz bluff Jun 30, 2022, 6:12 PM

#

style prop could also work, to overwrite the height with auto

#

also just a sidenote but you're using a string for the width and int for the height, it probably doesn't matter but I would use the same type just to be sure 👀

cobalt tiger Jun 30, 2022, 6:15 PM

#

Yeah, I am using ts, it showed it can accept string and number as types

#

So I thought it could take auto height as well.

cobalt tiger Jun 30, 2022, 6:15 PM

#

quartz bluff style prop could also work, to overwrite the height with auto

Can you pls help me with that?

#

            <Image alt={img} src={img} width={'768px'} height={'14000'} style={'height':'auto'}/>

quartz bluff Jun 30, 2022, 6:20 PM

#

<Image style={{height: "auto"}} />

#

needs extra brackets

cobalt tiger Jun 30, 2022, 6:20 PM

#

Oh!

cobalt tiger Jun 30, 2022, 6:21 PM

#

quartz bluff style prop could also work, to overwrite the height with auto

Well! I did as the doc says!

#

    <div className="mx-auto" key={img}>
            <Image alt={img} src={img} layout={'fill'} objectFit={'cover'} style={imageStyle} />
          </div>

#

  const imageStyle = {
    height: 'auto',
    width: '768px',
  };

#

Screenshot_2022-06-30_at_11.52.47_PM.png

#

Am I missing something?

quartz bluff Jun 30, 2022, 6:23 PM

#

I don't think you need to layout and objectFit anymore when height auto works 🤔

cobalt tiger Jun 30, 2022, 6:24 PM

#

So, I need to pass height and width and let the custom style ovrride it.

#

Okay, let me try that

#

I am able to see the image as expected now with fixed width. But it doesnt seem to be taking the custom height.

#

      <div className="mx-auto" key={img}>
            <Image alt={img} src={img} width={'768px'} height={'14000'} style={imageStyle} />
          </div>

#

Screenshot_2022-06-30_at_11.58.52_PM.png

#

Screenshot_2022-07-01_at_12.00.16_AM.png

quartz bluff Jun 30, 2022, 6:30 PM

#

can you see if it's there in devtools? maybe it's just getting overwritten

cobalt tiger Jun 30, 2022, 6:30 PM

#

Yes sure

#

Screenshot_2022-07-01_at_12.02.48_AM.png

#

Screenshot_2022-07-01_at_12.03.16_AM.png

#

Looks like the second image has different size but the first span tag, is overriting it

quartz bluff Jun 30, 2022, 6:40 PM

#

there's also layout="raw" but it's still experimental

#

#

but I guess that's pretty much just a img tag then

cobalt tiger Jun 30, 2022, 6:44 PM

#

Yeah, then I wouldnt be able to use the benefits of the Next js image performance

#

😭

quartz bluff Jun 30, 2022, 6:45 PM

#

maybe you can get the size of each image with js somehow and insert it into the Image as props?

#

or put a width and height attribute into your image object

cobalt tiger Jun 30, 2022, 6:45 PM

#

At this point I am ready to take the risk of experimental features. But ig, 12.2 doesnt have height=auto

quartz bluff Jun 30, 2022, 6:47 PM

#

what if you do your image array like this?

const images = [
    {
        url: 'https://firebasest...',
        width: 1280,
        height: 15311
    },
    {
        url: 'https://firebasest...',
        width: 1280,
        height: 15311
    }
]

#

and then insert the height and width for each one like

<Image alt={img} src={img.url} width={img.width} height={img.height} style={imageStyle} />

cobalt tiger Jun 30, 2022, 6:51 PM

#

I could do that.

#

Let me try this one

#

But then my question is shouldnt be height auto allowed in next js.

#

const url = require('url')
const http = require('http')

const sizeOf = require('image-size')

const imgUrl = 'http://my-amazing-website.com/image.jpeg'
const options = url.parse(imgUrl)

http.get(options, function (response) {
  const chunks = []
  response.on('data', function (chunk) {
    chunks.push(chunk)
  }).on('end', function() {
    const buffer = Buffer.concat(chunks)
    console.log(sizeOf(buffer))
  })
})

#

I am using this package

quartz bluff Jun 30, 2022, 6:56 PM

#

cobalt tiger But then my question is shouldnt be height auto allowed in next js.

I think the devs agree

cobalt tiger Jun 30, 2022, 7:00 PM

#

Which is why they got 12.2!

#

https://nextjs.org/docs/api-reference/next/future/image

next/future/image (experimental) | Next.js

Try the latest Image Optimization with the experimental next/future/image component.

quartz bluff Jun 30, 2022, 7:02 PM

#

that looks way better

#

but height and width are still required

cobalt tiger Jun 30, 2022, 7:05 PM

#

Yeah! lolsob

#

blobsweats

#

error - ./node_modules/image-size/dist/index.js:13:0
Module not found: Can't resolve 'fs'

Import trace for requested module:

#

Let me fix this, oh boy!

#

just to add height=auto in nextjs!

cobalt tiger Jun 30, 2022, 7:38 PM

#

Error: The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.

#

/** @type {import('next').NextConfig} */
const nextConfig = {
    strictMode: true,
    experimental: {
        images: {
            allowFutureImage: true,
        },
    },
    images: {
        domains: ['firebasestorage.googleapis.com',],
    },
};

module.exports = nextConfig;

#

OMG! @quartz bluff It worked it worked

#

            <Image alt={img} src={img} />

#

blob_aww

quartz bluff Jun 30, 2022, 8:17 PM

#

I guess I gotta start using future image now aswell 😂 @cobalt tiger

cobalt tiger Jun 30, 2022, 8:22 PM

#

Yeah I didnt pass any height and width

twilit iris Jul 1, 2022, 7:29 AM

#

cobalt tiger Which is why they got 12.2!

Do you know how to have the equivalent of layout=full in the future/image component.

cobalt tiger Jul 1, 2022, 5:36 PM

#

twilit iris Do you know how to have the equivalent of layout=full in the future/image compon...

I am not fure! height=100% width=100%?

#Guys Why next image cannot take height