Gatsby Image components - StaticImage vs GatsbyImage

📍Gatsby Image components 2가지

1️⃣StaticImage

- Static image

- 컴포넌트나 템플릿에 관계 없이 항상 똑같은 이미지이어야 할 때

- 예시

import { StaticImage } from "gatsby-plugin-image"

export function Dino() {
  return (
    <StaticImage
      // src 어트리뷰트에는 변수 전달 불가
      // 오직 url 또는 로컬 경로만 지정 가능
      src="../images/dino.png"
      alt="A dinosaur"
      placeholder="blurred"
      layout="fixed"
      width={200}
      height={200}
    />
  )
}

 

2️⃣GatsbyImage

- Dynamic image

- CMS로부터의 데이터 또는 컴포넌트에서 전달받은 값에 따라 이미지가 달라져야 할 때

 

- 이미지를 포함하는 모든 GraphQL 객체는 childImageSharp 필드 형태로 존재

- gatsbyImageData 리졸버를 통해 이미지를 설정

 

- getImage 함수를 통해 이미지를 쉽게 꺼낼 수 있다

( .childImageSharp.gatsbyImageData 를 생략할 수 있음 )

 

- 예시

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>
  )
}

export const pageQuery = graphql`
  query ($id: String) {
    blogPost(id: { eq: $id }) {
      title
      body
      author
      avatar {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  }
`