Question

我正在尝试使用Gatsby插件“gatsby-remark-images”在加载时创建模糊图像，最终在加载完成时呈现正确大小的图像，但我可能会错误地执行此操作。

我的索引页面有一个Hero组件，它按照图像的src向下传递：

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

...

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

我的索引页面查询提取了6个最新的博客帖子：

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
                }
              }
            }
          }
        }
      }
    }
  }
`;

问题：

我是否需要将Image添加到查询中才能使用base64方法？在那种情况下，我该怎么做？

如果我想将模糊技术添加到从查询中提取的图像，我该怎么办？我是否需要在加载和加载之间添加状态更改，并相应地在base64和src之间进行更改？

Answer 1

gatsby-remark-image仅用于处理从标记文件中的链接的图像。查看其文档https://www.gatsbyjs.org/packages/gatsby-remark-images/

对于一般图像处理，请参阅gatsby-image，它具有特殊的GraphQL片段＆amp; React组件，可以轻松添加响应性，懒惰的图像https://www.gatsbyjs.org/packages/gatsby-image/

盖茨比评论图像模糊技术

1 个答案: