FE/React
[FE / REACT] Next.js Image 이슈
따봉치치
2024. 1. 17. 19:23
Next.js 13버전을 사용 중이였고
Next.js에서는 img 태그 대신 Next에서 제공하는 Image 컴포넌트 사용을 권장한다.
Image태그를 사용하면
- lazy loading
- 이미지 사이즈 최적화
- placeholder 제공
의 장점을 가지고 있다고 한다
그러나, Image 태그를 사용할 때 사이즈 오류가 생기는 경우가 많은데
width, height 를 지정해줘도 이미지 사이즈가 지정값보다 작거나 크면
사이즈 속성이 제대로 먹히지 않는다
그렇다 보니 상위요소에 너비랑 높이를 지정해주고
objectFit과 layout={fill} 속성을 사용해주는 방식으로 해결해나가고(?) 있었는데
자꾸
Image with src "/sample/accommodation.png" has legacy prop "objectFit". Did you forget to run the codemod?
이런 오류가 콘솔창에 뜨더라..
왜 objectFit 속성을 쓰냐고!!! 묻는데.
그럼 해결법이 뭔데? 하고 물으니
https://nextjs.org/docs/messages/next-image-upgrade-to-13
공식문서에 나와있다고 한다
13버전 이후부터는 Image 컴포넌트에서 objectFit과 layout 속성은 사라졌다고..
대신 fill 을 사용하라고!
그리고 해결될 줄 알았는데 다음으로는 이런게 뜬다
Image with src "/_next/static/media/Rectangle-70.642ac878.png" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more:
fill 속성을 사용하는데 왜 sizes 속성을 사용 안하냐고..
Next가 제공하는 Image의 경우 sizes의 값을 지정해주지 않으면 디폴트 값으로 100vw로 세팅된다고 한다..
그래서
sizes="(max-width: 480px) 100px, (max-width: 320px) 80px, 60px"
이렇게 크기에 맞게 넣어주었더니 해결 되었다!
참고 :