[Next] next.js에서 Image 사용법

새로운 프로젝트를 진행하는데, next를 하는 수 없이(?) 하게 되어서 쓰고있는데
무엇보다 이미지 부분이 가장 다른 것 같다.

Next doc: Image

리모트 이미지냐, 로컬 이미지냐에 따라 접근이 다르다.
로컬 이미지의 경우에는 빌드 타임에 이미지에 접근할 수 있기 때문에 로드시 placeholder: "blur" 옵션을 사용할 수 있다.
그러나 리모트 이미지는 빌드 타임에 이미지에 접근할 수가 없다. 그래서 리모트 이미지를 불러오는데 placeholder같은 걸 옵션으로 줬다가는 바로 에러가 발생하는 것을 볼 수 있다.

기본적인 사용법은 다음과 같다.

1. Image import하기
2. Image 태그 사용하기.
3. 필수적으로 width, height, alt, src 프로퍼티를 넘겨야한다.(최적화를 위해)

원래 이미지는 인라인 블럭이라 일반적으로 블록이거나 인라인인 다른 요소들과 좀 다르다.

display는 inline이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 inline-block처럼 보입니다. - mdn

이미지의 특수성 때문에 발생하는 여러 이슈들도 많이 있다.
당장 떠오르는 건 처음 코딩 배웠을때 겪었던 이미지 아래에 생겼던 알 수 없던 빈 공간 정도?

에러1

이미지 witdh-heigth을 명시했는데 왜 지멋대로 하는걸까

아래와 같이 width, height을 50px로 고정시켰다.
그런데 width는 50인데 height은 제멋대로 나온다...
object-fit: cover를 해도 마찬가지.
원본 이미지의 비율을 지키려고 하는 것 같다.(공식문서 확인해보니 이 가설이 맞음)

기본 이미지 맞춤 동작은 컨테이너에 맞게 이미지를 늘립니다. 컨테이너에 맞고 가로 세로 비율을 유지하도록 레터박스 이미지에 대해 객체 맞춤: "포함"을 설정하는 것이 좋습니다. - next doc

이럴거면 height은 왜 쓰라고 하는거야ㅡㅡ;;;
부모요소에 overflow: hidden을 줘야한다는 것 같길래 추가했다.

<Image
sizes="210px"
width={50}
height={50}
alt={label}
src={img}
className="w-50 h-50 rounded"
/>

결국은... 인라인 스타일링을 해버리니까 먹었다.

<Image
sizes="210px"
width={50}
height={50}
alt={label}
src={img}
className="object-cover rounded"
style={{height: "50px",}}
/>

이 외에도 에러는 아닌데 콘솔에 지긋지긋하게 나오는 게 있는데, 이것도 아마 이미지 최적화와 관련된 이슈일 것 같다.

에러2

react_devtools_backend_compact.js:2367 Image with src "image url" 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.

width는 됐는데 height가 적용되지 않아서 나타난 콘솔 메시지. object-cover + overflow: hidden을 주어서 해결할 수 있는 것 같다. 위 코드에 추가하니 콘솔 메시지가 사라졌다.

너비와 높이를 설정하는 대신 이미지가 부모 요소를 채우도록 하는 부울입니다.

부모 요소는 위치를 지정해야 합니다: "상대", 위치: "고정" 또는 위치: "절대" 스타일을 지정해야 합니다.

기본적으로 이미지 요소에는 자동으로 위치가 할당됩니다: "절대" 스타일이 자동으로 할당됩니다.

기본 이미지 맞춤 동작은 컨테이너에 맞게 이미지를 늘립니다. 컨테이너에 맞고 가로 세로 비율을 유지하도록 레터박스로 된 이미지에 대해 객체 맞춤: "포함"을 설정하는 것을 선호할 수 있습니다.

또는 객체 맞춤: "커버"를 설정하면 이미지가 전체 컨테이너를 채우고 가로 세로 비율을 유지하기 위해 잘립니다. 이 경우 올바르게 보이려면 오버플로: "숨김" 스타일을 부모 요소에 할당해야 합니다.
-next doc: fill