I'm using next js , next Image and the images are not showing when i opened the inspector the images had 0 height , any thoughts?

Question

this is the code for the grid that contains the photos : 



 <div className="w-full h-full">
        <div className="flex flex-col justify-start items-center h-full w-full gap-4 py-4 ">
          <div className=" w-[70%] h-[60%] grid grid-cols md:grid-cols-4 sm:grid-cols-3  grid-cols-1 gap-y-6 gap-x-6 py-14 ">
            <div className="relative w-full h-full">
              <Image
                src={`https://himenobaraen.jp/wp-content/uploads/rosa_chinensis.jpg`}
                alt="image"
                unoptimized={true}
                fill={true}
                className="object-cover"
              />
            </div>
     </div>

i tried to give it a height in pixels but i cant give it a specific height because i need it to be responsive , what can i do ?

Answer 1

As per enter link description herenextjs/image component document, you need to provide either of the properties from

• fill or
• width/height