我應該如何使用 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. 您查詢圖像兩次。 您使用 固定的低分辨率縮略圖。 您繼續使用當前實現的全尺寸圖像。