접힌 부분 위에 Gatsby 이미지 로드

Gatbsy는 gatsby-image ( You can check out the API here )라는 멋진 유틸리티와 함께 ​​제공됩니다. <Img /> 및 gatbsy-image-sharp와 함께 gatbsy-transform-sharp 구성 요소를 사용하면 이미지 로드 및 반응형 이미지 크기 조정을 처리하는 현대적이고 우아한 방법을 얻을 수 있습니다.

Gatsby Image 구성 요소의 기본 로딩 소품은 "지연"이지만 이미지가 스크롤 없이 볼 수 있는 경우 페이지에서 페이지로 이동할 때 깜박임이 발생할 수 있습니다.

개츠비 이미지의 배경

gatsby-image는 GraphQL 조각을 그려서 이미지를 처리하기 위한 React 구성 요소를 생성하는 방식으로 작동합니다. 구성 요소가 로드되면 다양한 이미지 품질, 크기 및 유형의 srcSet가 로드됩니다. 간단한 예에 따라 준비된 GraphQL 조각을 사용하여 로컬 프로젝트 이미지를 쿼리합니다.

file(relativePath: { eq: "images/default.jpg" }) {
  childImageSharp {
    fluid(maxWidth: 400) {
      ...GatsbyImageSharpFluid
    }
  }
}

다음 인터페이스가 있는 개체를 반환합니다.

export interface FluidObject {
  aspectRatio: number
  src: string
  srcSet: string
  sizes: string
  base64?: string
  tracedSVG?: string
  srcWebp?: string
  srcSetWebp?: string
  media?: string
}

API는 상당히 강력하며 모든 옵션은 위의 link에서 찾을 수 있습니다. gatsby-image 구성 요소에서 반환된 데이터를 사용할 수 있습니다.

<Img
  fluid={data.file.childImageSharp.fluid}
  alt="Gatsby Docs are awesome"
/>

결과는 실제로 지연 로드하고 적절한 이미지(사용자의 브라우저에 가장 적합한 이미지)만 로드하는 <picture>가 있는 srcSet 요소입니다.

<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden;">
  <div aria-hidden="true" style="width: 100%; padding-bottom: 16%;"></div>
  <picture>
    <source type="image/webp" srcset="srcSet" sizes="sizes">
    <source srcset="srcSet" sizes="sizes">
    <img sizes="(max-width: 400px) 100vw, 400px" srcset="srcSet" src="src" alt="Gatsby Image" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: none 0s ease 0s;">
  </picture>
</div>

Gatbsy Image는 JPEG, PNG, WebP 및 Base64를 처리하고 사용자가 지시하면 모두 출력합니다. 저는 이 패턴을 정말 좋아합니다.

깜박임 수정

최근에 나는 Gatsby/Wordpress 스타터 리포지토리를 개발했고 헤더의 로고에 Gatsby Image를 사용했습니다. 페이지에서 페이지를 클릭하면 콘텐츠가 엄청나게 빠르게 로드되지만 페이지를 변경할 때마다 헤더의 로고 이미지가 깜박입니다. 수정은 매우 간단합니다. 스크롤 없이 볼 수 있는 <Img /> 구성 요소를 사용하는 경우 기본 로딩 동작을 재정의합니다.

이것:

<Img
  fluid={data.file.childImageSharp.fluid}
  alt="Gatsby Docs are awesome"
/>

다음과 같이 됩니다.

<Img
  fluid={data.file.childImageSharp.fluid}
  alt="Gatsby Docs are awesome"
  loading="eager"
/>

나는 약간 성가신 UI 버그에 대한 간단한 솔루션을 좋아합니다 😊. Gatsby/WP 프로젝트를 곧 시작할 생각이라면 내 시작 리포지토리를 확인하세요. https://github.com/arnonate/gatbsy-wordpress-starter .