반응형
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
<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.
이 글을 참고하여 Image 컴포넌트에 다음 프로퍼티를 추가해주어 경고 문구를 없앨 수 있었다.
priority={true}
반응형
'프로젝트 > 오심테(오늘의 심리테스트)' 카테고리의 다른 글
[warning] has "fill" but is missing "sizes" prop. Please add it to improve page performance (0) | 2023.05.27 |
---|---|
[NextJS] 카테고리 별 심리테스트 리스트 보이기 (0) | 2023.05.25 |
[NextJS & Firestore] getStaticPaths() 사용하여 동적 라우팅해주기 (0) | 2023.05.24 |
[NextJS & Firestore] NextJS에 Firestore 연동해보기 (0) | 2023.05.23 |
[Tailwind CSS] 테스트 상세/결과 컴포넌트(feat. SweetAlert2 & MUI Icon) (0) | 2023.05.22 |