-
NextJS Image 태그 height auto로 사용하기Next.js 2022. 1. 11. 14:38728x90
이 글은 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 태그를 사용할 수 있게 된다.
'Next.js' 카테고리의 다른 글
NextJS Image태그를 활용한 스켈레톤(Skeleton)처리 (4) 2022.04.21 NextJS Cypress 설정하기 (0) 2022.02.17 NextJS + Redux-Toolkit + next-redux-wrapper 설정하기 (0) 2021.09.24 NextJS Image에서 fallback 활용하기 (0) 2021.09.16 NextJS Firebase@9으로 migration하기 (0) 2021.09.14