Image 태그를 사용하면 style 적용에 문제가 생깁니다

기존에서도 문제가 있던거 같습니다
vercel/next.js#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 최적화 #17

Description