NextJS Image 태그 height auto로 사용하기

이 글은 NextJS 12 버전을 기반으로 작성되었습니다.

2023.08.04 - [Next.js] - Next.js Image 태그 height auto로 사용하기 (update 13 version)업데이트 된 내용은 이 글에서 확인하시기 바랍니다.

 

NextJS 10 버전이 나오며 가장 눈에 띄었던 것은 개인적으로 Image 태그였다.

Vercel로 배포하게 되면 cdn역할까지 해주며 큰 사용성을 보여주는 역할을 했는데, 생각보다 많이 사용하지만 NextJS Image태그(이하 Image 태그)에서는 사용하기 어려운 것이 있다.

 

Public 이미지의 경우 width, height를 사용하지 않아도 사이즈가 가변적으로 잘 들어가지만 실제 서비스를 할 경우 외부에서 이미지를 가지고 오는 경우가 더욱 많기에 그럴 경우 width와 height를 입력해 주어야 한다.

 

하지만 그런 상황에서 문제가 되는 것은 width에 맞는 비율로 높이를 auto값으로 주어야 되는데 Image태그는 두 값이 모두 필수 값이기에 이런 상황에서 Image태그의 사용을 포기하게 되는 상황이 발생한다.

 

그런 상황에 사용할 수 있는 간단한 방법에 대해 설명해 보고자 한다.

// AutoHeightImage.tsx

import React, { memo } from 'react';
import Image, { ImageProps } from 'next/image';
import equal from 'fast-deep-equal';

import { AutoHeightImageWrapper } from './AutoHeightImage.styles';

const AutoHeightImage = ({ ...props }: ImageProps): React.ReactElement => (
  <AutoHeightImageWrapper>
    <Image layout="fill" className="autoImage" {...props} />
  </AutoHeightImageWrapper>
);

export default AutoHeightImage;

// AutoHeightImage.styles.ts

import styled from 'styled-components';

export const AutoHeightImageWrapper = styled.div`
  width: 100%;
  & > span {
    position: unset !important;
    & .autoImage {
      object-fit: contain !important;
      position: relative !important;
      height: auto !important;
    }
  }
`;

// Exam.tsx

...

<AutoHeightImage src="https://examImageUrl.site" />

...

위와 같은 방법으로 컴포넌트를 만들어 둔다면 이제 넓이에 맞는 가변적인 높이의 Image 태그를 사용할 수 있게 된다.