المقاسات في مكون Image في nextjs

إذا كنت لا تعلم المقاسات width أو height يمكنك استخدام ال layout=fill حتى تأخذ الصورة نفس مقاس ال container كما في المثال التالي

<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
  <Image
    alt="Image Alt"
    src="/image.jpg"
    layout="fill"
    objectFit="contain" //container تأخذ أقل حجم ليتناسب مع ال 
  />
</div>

لحل مشكلة المقاسات وتحديد المقاسات بنفسك يمكنك احاطة المكون image بعنصر div واعطائه بعض الخصائص كالتالي

import Image from 'next/image'



const MyImage = (props) => {
  return (
	<div style={{position:"relative", height:50, width:100}}>
      <Image
        loader={myLoader}
        src="me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
     </div>
  )
}