Gatsby remark 이미지 흐림 기법

Question

Gatsby-plugin "gatsby-remark-images"를 사용하여로드시에 흐릿한 이미지를 생성하여로드가 완료되면 결국 적절한 크기의 이미지를 렌더링하려고합니다.하지만이 작업을 잘못 수행했을 수 있습니다. .

import Image from "../posts/img/Image.jpg"; 

...

<Hero id="indexPage" src={Image} /> 

내 인덱스 페이지 조회가 6 개 최신 블로그 게시물을 가져옵니다 :

내 인덱스 페이지는 다음과 같은 이미지의 SRC를 아래로 전달되는 영웅의 구성 요소를 가지고 같은 :

export const pageQuery = graphql` 
    query IndexQuery { 
    allMarkdownRemark(
     limit: 6 
     sort: { fields: [frontmatter___date], order: DESC } 
     filter: { frontmatter: { category: { eq: "blog"} } } 
    ) { 
     edges { 
     node { 
      fields { 
      slug 
      } 
      excerpt(pruneLength: 100) 
      timeToRead 
      frontmatter { 
      title 
      description 
      tags 
      date 
      category 
      thumbnail { 
       childImageSharp { 
       responsiveSizes(quality: 50, cropFocus: CENTER, toFormat: JPG) { 
        src 
        srcSet 
        sizes 
        base64 
       } 
       } 
      } 
      } 
     } 
     } 
    } 
    } 
`; 

질문 :

base64 방법을 사용하려면 이미지를 쿼리에 추가해야합니까? 그렇다면 어떻게해야합니까?

쿼리에서 가져온 이미지에 흐림 기법을 추가하려면 어떻게해야합니까? 로드되고로드되는 사이에 상태 변경을 추가해야하고 그에 따라 base64와 src를 변경해야합니까?

Answer 1

gatsby-remark-image은 에 연결된 이미지를 처리 ​​할 때 markdown files 내에 있습니다. 그 문서 https://www.gatsbyjs.org/packages/gatsby-remark-images/ 일반적인 이미지 처리를위한

보기 쉽게 반응, 게으른 이미지를 추가 할 수 있습니다 구성 요소에 반응 & 특별 GraphQL 조각을 가지고 개츠비 - 이미지를 볼 수 https://www.gatsbyjs.org/packages/gatsby-image/