盖茨比备注图像模糊技术答案

【问题标题】：Gatsby remark images blur technique盖茨比备注图像模糊技术
【发布时间】：2018-03-30 01:19:08
【问题描述】：

我正在尝试使用 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
                }
              }
            }
          }
        }
      }
    }
  }
`;

问题：

我是否需要将图像添加到查询中才能使用 base64 方法？那样的话，我该怎么做呢？

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

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

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

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

【讨论】：