[Next.js] <Image/> 태그 사용방법

<CharacterImageWrapper>
    <Image 
    src={character.image} 
    alt={character.name} 
    fill
    />
</CharacterImageWrapper>

const CharacterImageWrapper = styled(Box)`
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid ${({ theme }) => theme.palette.primary.main};
`;

 

<Image/>의 부모 요소(이미지 래퍼)에 꼭 position : relative;를 추가해야한다.