게이츠비 플러그인 사진 소개

게이츠비 이미지 플러그인은 게이츠비 내부의 이미지를 처리하고 변환하는 새로운 방식을 도입했다.원시 게이츠는 이미지 구성 요소보다 더 깨끗한GraphQL 조회와 새로운StaticImage 구성 요소를 도입했다.여기에 몇 개의 조수 함수와 더 좋은 API를 더하면 이 구성 요소는 매우 큰 개선이 될 것 같다.
이 글은 최초로 https://robertmarshall.dev/blog/an-introduction-to-gatsby-plugin-image 에 발표되었다. (더욱 최신)

카탈로그

Original Gatsby Image Component

The Different between Gatsby Image and Gatsby Plugin Image

Named Import

Static Image Component

Change in Gatsby Image

No More Fragments, New API

Introduction of getImage and getSrc

GatsbyImage getImage()

Gatsby getSrc()

Considerations

Possible Bugs

Using the Old with the New

Changing APIs

How to Use StaticImage

How To Use Gatsby Image

How To Use getSrc()

Your Thoughts

원본 개츠비 이미지 구성 요소
개츠비 이미지는 우리가 알고 있는 원시 개츠비 구성 요소이다.Gatsby GraphQL 쿼리와 함께 최적화된 이미지를 쉽게 생성할 수 있는 교묘한 코드입니다.엔진 뚜껑 아래에서, 게이츠비 플러그인 샤프를 사용하여 그림 변환을 처리합니다.처음에는 무거운 사진이 사이트의 속도를 늦추는 문제를 해결할 수 있는 좋은 해결 방안이었다.맞춤형 지연 캐리어와 늘어나는 삼키기 스크립트를 함부로 만들지 않고 구성 요소만 삽입하면 됩니다.
게이츠비는 사람들이 더 좋고, 더 빠르고, 더 효율적인 사이트에 대한 요구가 갈수록 높아짐에 따라, 새로운, 개선된 구성 요소 Gatsby Plugin Image 를 내놓았다.

게이츠비 이미지와 게이츠비 플러그인 이미지의 차이
비교적 새로운 게이츠비 플러그인 이미지는 비교적 오래된 게이츠비 이미지를 채택하여 이를 완전히 재구성하고 훌륭한 새로운 기능을 도입했다.이러한 차이점은 다음과 같습니다.

이름 가져오기
기본 내보내기 GatsbyImage 에 익숙해져서 가방에서 직접 가져올 수 있습니다.다른 몇 가지 기능을 도입했기 때문에, 이 모든 것은 변화가 생겼다.현재 GatsbyImage 는 이름의 가져오기입니다.

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

이것은 큰 변화가 아니지만, 낡은 부품을 재구성할 때 반드시 기억해야 한다.

정적 이미지 구성 요소
우리가 수입GatsbyImage한 부품의 방식이 변화한 일부 원인은 새로 증가한 부품 때문인 것 같다.StaticImage 구성 요소
그것은 정적 이미지를 가져오는 깨끗한 방법을 제공했다.특히 필요한 이미지가 특정 템플릿이나 어셈블리 내에서 변경되지 않는 경우에 유용합니다.예를 들어 404페이지의 이미지나 사이트 로고입니다.과거에는 모든 이미지가 동적이든 정적이든 똑같은 구성 요소를 사용했다.
이 새 구성 요소 StaticImage 의 장점은 절대 경로와 상대 경로를 사용하고 국부 이미지를 찾을 필요가 없다는 것이다.이것은 더욱 좋은 개발자 체험이다!
이 구성 요소의 사용 방식은 몇 가지 제한이 있습니다. 예를 들어 StaticImage 구성 요소를 사용하는 구성 요소 내부에 파일 이름을 직접 제공해야 합니다.이것은 구축할 때 분석한 것이기 때문에 도구를 사용할 수 없다.그러나 동적 이미지는 GatsbyImage 구성 요소와 함께 사용할 수 있기 때문에 문제로 간주해서는 안 된다.
gatsby-source-filesystem
How to use the Static Image Component
게이츠비 이미지의 변화GatsbyImage 구성 요소에 많은 변경 사항이 있습니다. 업그레이드하기 전에 이 변경 사항을 알아야 할 수도 있습니다.
개츠비 이미지가 기능 구성 요소로 업데이트되었습니다.이것은 클래스 기반 구성 요소처럼 확장할 수 없다는 것을 의미한다.현재, 크로스 구성 요소에서 코드를 다시 사용하려면 을 사용해야 합니다.
'유체' 이미지 대상이 더 이상 존재하지 않습니다. GraphQL 조회에서 만든 데이터 대상은 과거처럼 변경되어서는 안 됩니다.getImage 기능(다음 확장)을 사용할 때 데이터 반환을 변경할 수 없습니다.이러한 데이터는 더 이상'공공'데이터로 간주되지 않는다. 개발 업체는 이러한 데이터는 통지하지 않은 상황에서 변경할 수 있다고 말한다.불행하게도, 이것은 맞춤형 예술 지도를 지원하지 않는다는 것을 의미한다. 비록 나중에 추가될 것이라고 말하지만.
Composition
더 이상 세션이 없습니다, 새로운 API
우리는 더 이상 입력할 필요가 없다 ...GatsbyImageSharpFixed.이후 그것은 GatsbyDataImage 기능에 의해 대체되었다.이 함수는 문서에서 개술한 일련의 매개 변수를 받아들일 수 있습니다.본질적으로 말하자면, 이것은 더욱 깨끗한 방법으로, 같은 결과를 얻을 수 있으며, 단지 새로운 내용을 추가하기만 하면 된다.
blur up base4 이미지와 SVG 추적 로더를 사용할 수 있는 것 외에 현재 주 색조 설정이 있습니다.이것은 그림의 주색을 계산하고 그림을 불러올 때 고체 배경색으로 사용합니다.
새로운 이미지 형식: AVIF.최초로 동영상에 사용되었는데, 이 면판세 형식은 현재 크롬에서 지원되고 있으며, 곧 안드로이드와 Firefox에 추가될 것이다.이 새 파일 형식의 크기(무게)는 일반적으로 WebP 형식의 절반입니다.이것은 더 빠른 사이트를 만드는 데 위대한 도움이 될 것이다.
AVIF에 대한 자세한 내용을 보려면 agatsby-plugin-image를 클릭하십시오.
look at this article
getImage 및 getSrc 소개
이 두 가지 새로운 기능은 원래의 게이츠비 이미지 플러그인에 대한 커다란 개선으로 개발자의 체험에 있어서 진정한 장점이다.

GatsbyImage getImage()getImage 함수는 도움말 함수로 코드를 더욱 뚜렷하고 쉽게 읽을 수 있도록 한다.GraphQL 질의에서 작성된 파일을 승인하고 Gatsby Image 구성 요소로 전달할 객체를 반환합니다.'유체'대상을 찾기 위해 반드시 끼워 넣는 대상의 단계를 정리해야 하는 날은 이미 지나갔다.

Example of how to use GatsbyImage getImage
GatsbyImage getSrc()
나는 내가 많은 곳에서 이 새로운 조수 함수를 사용하는 것을 볼 수 있다.특정 이미지 src URL을 반환하는 데 사용됩니다.SEO 구성 요소에 절대 URL을 제공하는 방법을 예로 들 수 있습니다.내가 처음으로 게이츠비와 교제했을 때, 나는 정말 발버둥쳤다.

How to use Gatsby Image getSrc
고려 요소
웹 사이트에서 이 새 플러그인/구성 요소 집합을 사용하기 전에 몇 가지 고려해야 할 것이 있습니다.

이 가능하다, ~할 수 있다,...
이 구성 요소는 게이츠비 팀과 지역 사회가 믿을 수 없는 속도로 개선하고 있지만, 여전히 빈틈이 있을 수도 있다.테스트 버전이니까.

신구 결합
게이츠가 이미지 플러그인보다 비교적 빨리 테스트 단계에서 물러나 생산 사이트에 내놓으려고 하더라도 다른 소프트웨어 패키지는 그렇게 빨리 업그레이드되지 않을 것이다.예를 들어, 사용하는 CMS가 최신 버전의 API로 업데이트되지 않았습니다.
이것은 진정한 문제가 아니다. 왜냐하면 낡은 플러그인과 새 플러그인은 모두 한 사이트에서 함께 사용할 수 있기 때문이다.그러나 JavaScript 패키지의 크기가 증가하므로 고려해야 할 수도 있습니다.

API 변경
이 구성 요소는 테스트 단계에 있기 때문에 상당히 안정적인 상태에 있지만 항상 변화가 발생할 수 있다.만약 당신의 사이트 (어쩌면 여러 사이트) 에서 사용자 정의 이미지 크기를 많이 사용한다면, 구성 요소가 완전히 안정되기 전에 이렇게 하지 않는 것이 가장 좋다.만약 실현하고자 하는 작업량이 매우 적다면, 일부 변경 사항을 문제로 여기지 않을 수도 있습니다.그러나 이는 서로 다른 사이트/이미지 구현에 누적될 수 있다.

정적 이미지 사용 방법
개발자는 사용하기 쉬운 부품을 만드는 데 매우 잘한다.StaticImage를 사용하여 이미지를 추가하려면 다음과 같이 하십시오.

import { StaticImage } from "gatsby-plugin-image"
export function YourWrapperComponent() {
  return <StaticImage src="../images/yourStaticPicture.png" alt="Incredible Art" />
}

게이츠비 이미지를 어떻게 사용하는가GatsbyImage 구성 요소는 기존의 실현과 유사하지만 약간의 조정이 있다.예를 들어GraphQL 조회를 만들어야 하지만, 현재 우리는 GatsbyImageData 함수와 getImage helper 함수를 사용합니다.그런 다음 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>
  )
}
export const postQuery = graphql`
  query {
    blogPost(id: { eq: $BlogId }) {
      title
      body
      author
      avatar {
        childImageSharp {
          gatsbyImageData(
            width: 400
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  }
`

getSrc() 사용 방법StaticImage 구성 요소와 비슷합니다. 이 조수 함수는 매우 사용하기 쉽습니다.이 예에서 GraphQL 질의는 모 어셈블리에서 수행됩니다.그리고 이 파일은 도구로 전달되며 getSrc 함수에 전달됩니다.그런 다음 함수는 이미지 src URL을 반환합니다.

import { getSrc } from "gatsby-plugin-image"
const YourWebPage = ({ data }) => {
  const seoImagePath = getSrc(data.file)
  return (
    <>
      <SEO imageSrc={seoImagePath} />
    </>
  )
}

너의 생각
이 새 조립품은 게이츠가 튼튼한 시리즈보다 더 큰 하이라이트가 될 것 같다.비록 초기에 그들은 진정한 잠재력을 가지고 있었다.
나는 당신이 상술한 내용에 대한 견해와 구성 요소에 대해 어떤 성공/문제가 있는지 매우 알고 싶습니다.언제든지 알려주세요.