[Gatsby & GraphQL] gatsbyImageData 리졸버

📍참고

https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/adding-gatsby-image-support/#adding-a-gatsbyimagedata-graphql-resolver

Adding Gatsby Image support to your plugin | Gatsby

 

📍gatsbyImageData 리졸버

- 이미지의 크기를 조절 (layout)

- 이미지가 위치할 자리에 처음부터 저해상도 이미지가 표시되게 함 (placeholder)

- GraphQL 코드 예시

query {
  allContentfulRecipe(
    sort: {title: ASC},
    filter: {content: {tags: {eq: "food"}}}
  ) {
    nodes {
      title
      id
      cookTime
      prepTime
      image {
        gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
      }
    }
  }
}

 

📍layout

📍 기본적으로 width, height 를 통해 이미지 크기를 설정할 수 있음

1️⃣ CONSTRAINED (default) : 이미지의 크기가 원래 자리의 크기보다 크면, 자연스럽게 축소됨

- 예시

2️⃣FIXED : 이미지의 크기가 원래 자리의 크기보다 크면, 크기를 넘는 이미지가 잘린 형태로 출력

- 예시

 

3️⃣FULL_WIDTH : CONSTRAINED와 같으나 이미지의 크기가 원래자리의 크기보다 작은 경우, 비율을 유지하며 증가하여 자리를 꽉채움

📍placeholder

1️⃣DOMINANT_COLOR : 소스 이미지의 주요 색상을 계산하고 단색 배경색으로 사용

2️⃣BLURRED : 소스 이미지가 모자이크된 낮은 해상도 버전을 사용

3️⃣TRACED_SVG : 단순한 SVG가 생성됨 (폐지)