gatsby 이미지 플러그인 (gatsby-plugin-image)

Gatsby

Oct 05, 2022

Gatsby

Gatsby image plugin 설치하기

먼저 아래 명령어로 이미지 플러그인을 설치해준다.

$ npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

그 다음 gatsby-config.js파일에 플러그인을 추가해준다.

module.exports = {
	plugins: [
		`gatsby-plugin-image`,
		`gatsby-plugin-sharp`,
		`gatsby-transformer-sharp`,
	],
};

어떤 이미지를 사용할 것인가?

Gatsby 이미지 플러그인에는 정적 이미지와 동적 이미지의 두 가지 구성 요소가 포함되어 있다. 사용할 이미지에 따라 다른 컴포넌트를 사용하자.

정적 이미지(Static Image)

로고나 프로필 이미지 등 컴포넌트를 사용할 때마다 동일한 이미지를 사용하고 싶을 경우에는 <StaticImage> 컴포넌트로 작성한다. 이미지는 프로젝트의 로컬 파일이나 원격 서버에서 호스팅되는 이미지 모두 가능하고 모든 원격 이미지는 빌드 시 다운로드되고 크기가 조정된다.

사용법은 <StaticImage> 컴포넌트 안에 원하는 이미지 경로를 작성하면 된다.

import { StaticImage } from 'gatsby-plugin-image';

export function Foo() {
	return <StaticImage src="{로컬 이미지 경로 or 원격 이미지 경로}" alt="" />;
}

📌 참고: 원격 이미지는 빌드 시 다운로드되고 크기가 조정되기 때문에 이미지가 다른 서버에서 변경되면 다시 빌드할 때까지 페이지에서 업데이트되지 않는다.

동적 이미지(Static Image)

사용할 때마다 이미지 값이 변경되는 경우에는 <GatsbyImage> 컴포넌트로 작성한다.

먼저 페이지 query의 childImageSharp 필드에 이미지를 추가한다.

query {
	blogPost(id: { eq: $Id }) {
		title
		body
		avatar {
			childImageSharp {
				gatsbyImageData
			}
		}
	}
}

그 다음 <GatsbyImage> 컴포넌트로 원하는 이미지를 추가해준다.

import { graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';

function BlogPost({ data }) {
	const image = getImage(data.blogPost.avatar);
	return (
		<section>
			<h2>{data.blogPost.title}</h2>
			<GatsbyImage image={image} alt={data.blogPost.author} />
			<p>{data.blogPost.body}</p>
		</section>
	);
}

References

https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/

Table Of Contents