[NextJS] Image 컴포넌트 warning

Image 관련하여 다음과 같은 warning이 떴다. 나는 분명 Image에 width와 heigth를 잘 지정해준 것 같은데도 저런 경고가 뜨니 의아했다. 

Next Image has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

별거 별거 다 해봐도 해결이 안됐는데, 다음 글에 있는 답변을 보고 해결했다.

https://github.com/vercel/next.js/issues/40762

[NEXT-649] next/future/image parent position warning · Issue #40762 · vercel/next.js

<Image
      src={test.image}
      alt={test.title}
      width={500}
      height={350}
      style={{ width: 500, height: 350 }}
      className="object-cover"
      priority={true}
/>

저렇게 style prop을 추가해주니 무슨 이유에서인지는 모르겠으나 경고 문구가 사라졌다. 

 

추가적으로 이 경고 문구 또한 마주쳤는데,

was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

https://stackoverflow.com/questions/74394893/nextjs-image-the-resource-link-of-image-was-preloaded-using-link-preload-but-n

NextJS image The resource [link of image] was preloaded using link preload but not used within a few seconds from the window's l

이 글을 참고하여 Image 컴포넌트에 다음 프로퍼티를 추가해주어 경고 문구를 없앨 수 있었다.

priority={true}