개츠비 이미지와 개츠비 사용을 소개합니다.js V2

이 글은 처음에 발표되었다 codebushi.com
비디오 자습서 보기

Gatsby.js V2이 최근에 출시되었고 Gatsby Image의 실시 방식에 대해 약간의 변경을 진행하였다.게츠비 이미지는 웹 사이트의 모든 이미지를 쉽게 최적화할 수 있도록 반응 구성 요소입니다.이것은 모바일 장치에 커다란 그림을 불러오지 않을 뿐만 아니라, 초기 페이지의 불러오는 속도가 매우 빠를 수 있도록 그림 크기를 조정합니다.만약 네가 개츠비의 초보자라면, 나는 네가 먼저 그들의 official tutorial을 읽고 개츠비의 작업 원리를 익히는 것을 강력히 건의한다.
게츠비 이미지를 정적 사이트에 추가하는 것은 좀 까다로울 수 있습니다. 특히 게츠비는 GraphQL을 사용하여 이미지가 사용되기 전에 이미지를 조회하고 불러오기 때문입니다.다음은 필요한 단계의 분해입니다.
1) 설치에 필요한 npm 패키지 및 설정gatsby-config.js2) GraphQL을 사용하여 이미지를 질의할 수 있는지 테스트합니다.
3) 필요한 이미지 유형을 선택하여 고정하거나 이동한 다음 페이지에 질의를 추가합니다.
4) 페이지에서 개츠비 이미지<Img> 레이블을 사용합니다.
다음은 최종 제품 데모입니다.

개츠비 이미지 데모 (소스 코드 보기)

개츠비 이미지 설치 및 구성

설치default Gatsby Starter부터 시작합니다.Repo를 복제하거나 Gatsby CLI를 사용하여 starter를 설치할 수 있습니다.

gatsby new image-demo https://github.com/gatsbyjs/gatsby-starter-default
cd image-demo/

CLI를 사용하는 경우 최초 패키지가 yarn 와 함께 설치되고 새 버전이 있기 때문에 계속 사용해야 합니다.파일을 잠급니다.repo를 복제하고 yarn 를 사용했다면, npm install 를 계속 사용하면 패키지 설치 프로그램을 혼합하지 않습니다.이 프레젠테이션의 나머지 부분에서는 npm 을 사용합니다.
개츠비 이미지 설치

yarn add gatsby-image

우리는 또 다른 세 개의 소프트웨어 패키지gatsby-transformer-sharp, gatsby-plugin-sharp, gatsby-source-filesystem가 필요하다.기본 starter를 사용하지 않고 패키지를 설치했다면 이 절차를 건너뛸 수 있습니다.

yarn add gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

yarn 패키지는 Gatsby가 디렉터리의 이미지에 GraphQL을 사용하고 조회할 수 있도록 합니다.이 두 가지 gatsby-source-filesystem 플러그인은 그림을 표시하기 전에 그림을 처리하는 플러그인입니다.sharp를 열고 플러그인을 추가합니다.기존 플러그인에 추가하겠습니다.파일은 다음과 같습니다.

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
  ],
}

중요 팁: 이미지에 올바른 것을 지정해야 합니다gatsby-config.js!path 이미지에 액세스하기 위해 이 폴더를 봅니다.기본 starter를 사용했기 때문에, gatsby-source-filesystem 폴더가 이미 있기 때문에, 우리는 그것을 사용할 것입니다.Unsplash에서 이미지를 가져와 폴더에 추가합니다.

GraphQL을 사용하여 이미지 조회 테스트

플러그인을 설치하면 개발 모드에서 사이트를 시작할 수 있습니다.

gatsby develop

개발 모드에서 사이트를 보려면 /src/images로 이동합니다.이제 GraphiQL 인터페이스를 사용하여 이미지 조회의 작동 원리를 파악합니다.사이트의 GraphiQL 보기를 보려면 http://localhost:8000/ 를 방문하십시오.여기서 우리는 사용할 수 있는 다른 조회를 테스트할 수 있다.http://localhost:8000/___graphql 폴더에 3개의 이미지를 추가하고 이름을 /src/images one.jpg 및 two.jpg 로 지정했습니다.질의three.jpg를 수행하려면 다음을 사용합니다.

query {
  imageOne: file(relativePath: {eq: "one.jpg"}) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        base64
        tracedSVG
        aspectRatio
        src
        srcSet
        srcWebp
        srcSetWebp
        sizes
        originalImg
        originalName
      }
    }
  }
}

재생 단추를 누르면 응답 열에서 데이터를 볼 수 있습니다.이것은 게이츠비가 당신의 그림을 찾아서 처리할 수 있다는 것을 증명한다.
one.jpg 을 이 폴더의 다른 이미지로 변경하고 반환된 데이터를 확인하십시오.

GraphQL 질의 추가

우리는 현재 이 조회를 복사해서 홈 구성 요소에서 사용할 수 있습니다.켜기file(relativePath: {eq: "one.jpg"}).src/pages/index.js 에서 가져오기graphql 및 'gatsby' 에서 가져오기Img 가 필요합니다.최종 결과는 다음과 같이 페이지에 질의를 추가합니다.

import React from 'react'
import { Link, graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '../components/layout'

const IndexPage = (props) => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "one.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 1000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

조회가 좀 달라 보여서 'gatsby-image' 의 모든 필드를 삭제하고 fluid(maxWidth: 1000) {} 를 사용했습니다. 이것은 조회 세션입니다.일부 제한으로 인해 GraphiQL에서 사용할 수 없었지만 여기에서 추가할 수 있습니다.Gatsby Image Readme에서 다양한 부분에 대한 정보를 더 많이 읽을 수 있습니다.
중요 참고 사항: ...GatsbyImageSharpFluid 섹션이 변경되지 않는 방법에 유의하십시오. ...GatsbyImageSharpFluid 은 file(relativePath: { eq: "one.jpg" }) 및 relativePath 에서 앞에 지정한 폴더가 아니기 때문입니다.index.js를 변경할 필요가 없습니다.
개츠비 이미지는 두 가지 유형의 응답 이미지gatsby-config.js와 gatsby-source-filesystem가 있습니다.이런 차이는 조회의 외관을 바꿀 것이다.relativePath 쿼리는 다양한 화면 해상도를 지원하기 위해 설정된 너비와 높이를 가지고 있습니다.fixed 쿼리는 최대 너비와 최대 높이를 가지며 다양한 화면 크기를 지원하기 위해 여러 개의 이미지를 생성합니다.대부분의 경우, 나는 화면의 크기에 따라 이미지가 달라지기 때문에 fluid 유형을 사용한다는 것을 발견했다.fixed 유형을 사용하거나 두 가지 유형에 대한 자세한 내용을 보려면 Readme 을 참조하십시오.

개츠비 이미지 구성 요소 사용하기

따라서 페이지에서 조회를 진행하여 fluid 구성 요소의 fluid 을 통해 GraphQL 데이터에 접근할 수 있습니다.데이터의 전체 경로는 fixed 입니다.다음과 같이 props 어셈블리에 전달할 수 있습니다.

<Img fluid={props.data.imageOne.childImageSharp.fluid} />

너는 그것을 마음대로 분해할 수 있다. 명확하게 보기 위해서 나는 완전한 경로를 사용한다.이 이미지는 현재 개발 사이트에 표시되어야 합니다!세 이미지를 모두 가져오려면 블록IndexPage을 복사하여 붙여넣은 다음 props.data.imageOne.childImageSharp.fluid 및 <Img> 으로 이름을 변경합니다.이 함수들이 imageOne 구성 요소에 전달된 모든 함수와 일치하는지 확인하면 마음대로 호출할 수 있습니다.

query {
  imageOne: file(relativePath: { eq: "one.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
  imageTwo: file(relativePath: { eq: "two.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
  imageThree: file(relativePath: { eq: "three.jpg" }) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
}

어셈블리는 다음과 같습니다.

<Img fluid={props.data.imageOne.childImageSharp.fluid} />
<Img fluid={props.data.imageTwo.childImageSharp.fluid} />
<Img fluid={props.data.imageThree.childImageSharp.fluid} />

우리는 이 검색에서 같은 내용을 많이 반복해서 사용자 정의 세션을 생성해서 정리할 수 있다.imageTwo 블록을 꺼내서 다음과 같은 새로운 부분을 만듭니다.

export const fluidImage = graphql`
fragment fluidImage on File {
  childImageSharp {
    fluid(maxWidth: 1000) {
      ...GatsbyImageSharpFluid
    }
  }
}
`;

그런 다음 이러한 새 세션으로 중복 코드를 교체할 수 있습니다.

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "one.jpg" }) {
      ...fluidImage
    }
    imageTwo: file(relativePath: { eq: "two.jpg" }) {
      ...fluidImage
    }
    imageThree: file(relativePath: { eq: "three.jpg" }) {
      ...fluidImage
    }
  }
`

지금 저희 홈페이지에 이 세 장의 사진이 있습니다!너희는 서로 다른 게이츠비 세션을 가지고 놀아서 서로 다른 로드 효과를 얻을 수 있다.imageThree은'모호'효과가 발생하여 시도<Img />서로 다른 효과를 얻고 고정된 이미지로 실험을 진행한다.

개츠비 이미지 데모 (소스 코드 보기)