javascript - 我应该如何使用 Gatsby.js 生成缩略图和全尺寸图像

Question

如果我同时需要图片的缩略图(即低分辨率版本)和完整尺寸版本，我应该怎么做。

我有一个中等风格的图像缩放组件(https://codesandbox.io/s/cool-butterfly-w78l5)，我希望该组件显示缩略图，只有当它被点击并缩小时，它通过指定不同的 url 来显示全尺寸图片src 和 enlargedSrc。

这就是我查询所有图像文件的方式

const ImageSupplier = () => {
  const { allFile } = useStaticQuery(graphql`
    query {
      allFile(
        filter: {
          extension: { regex: "/(jpg)|(jpeg)|(png)/" }
          sourceInstanceName: { eq: "imageFolder" }
        }
      ) {
        edges {
          node {
            childImageSharp {
              fluid(
                maxWidth: 800
                quality: 95 
              ) {
                originalName
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      }
    }
  `);

但它只给了我带有fluid.src的全尺寸图像，它还带有一个srcSet但我不知道如何使用srcSet 实现我想要的。

Answer 1

1. 你应该使用Gatsby-Image .
2. 您两次查询图像。您使用 fixed缩略图的分辨率较低。您继续使用当前实现的全尺寸图像。