![thumbnail](/static/f38da604496ac6b874653fdee829915a/b1abc/gatsby-thumbnail.png)
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