taekyeomlee
commented
2 years ago Image 태그를 사용하면 style 적용에 문제가 생깁니다
기존에서도 문제가 있던거 같습니다 https://github.com/vercel/next.js/discussions/18312
이곳에서 제공해주는 아이디어인 div 태그와 같은 상위태그를 덮어준 뒤 flex 등으로 정렬을 해도 적용에 어려움이 있었습니다.
따른 방법이 없으면 Image 컴포넌트가 아닌 img 태그를 쓰는게 더 좋은 방법인걸로 보입니다
// next.config.js
images: { domains: ['cdn.upbit.com'], },
// components/articleB/HighlightB.jsx
12번째 줄
<Image src={source} width="5px" height="10px"
42번째 줄
<Image src="https://cdn.upbit.com/images/ico_change.c6ad0e9.png" width="7px" height="10px" />
추가로
- source에 외부 url 주소를 입력하게 되면 next.config.js에서 도메인 설정이 필요합니다
- Image컴포넌트를 사용하기 위해서는 layout="fill"속성 적용이 필요합니다. 이 속성은 이미지를 가득 채워 적합하지 않아 이미지 별로 width및 height 적용이 필요합니다.
진행해보시고 안되면 img태그로 진행하는게 좋아보입니다
next에서 image 최적화
next에서 이미지 용량 최적화를 지원합니다. 빠른 렌더링을 위해서는 next용 Image 태그 사용하는 것이 좋습니다.