简体   繁体   English

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

[英]How should I use Gatsby.js to generate both the thumbnails and full-size images

What should I do if I need both a thumbnail(ie low resolution version) of a picture and the full size version.如果我需要图片的缩略图(即低分辨率版本)和全尺寸版本,我该怎么办。

I have a medium style image zoom component( https://codesandbox.io/s/cool-butterfly-w78l5 ) and I want that component to show the thumbnails and only when it is being clicked on and it gets zoomed out it shows the full-size picture by specifying different url to src and enlargedSrc .我有一个中等风格的图像缩放组件( https://codesandbox.io/s/cool-butterfly-w78l5 ),我希望该组件显示缩略图,并且只有当它被点击并被缩小时,它才会显示通过指定不同的URL,以全尺寸图片srcenlargedSrc

this is how I query all my images files这就是我查询所有图像文件的方式

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

But it only gives me the full-size image with fluid.src , it also comes with a srcSet but I have no idea how to use srcSet to achieve what I want.但它只给了我带有fluid.src的全尺寸图像,它还带有一个srcSet但我不知道如何使用srcSet来实现我想要的。

  1. You should use Gatsby-Image .您应该使用Gatsby-Image
  2. You query for the images twice.您查询图像两次。 You use fixed with a low resolution for thumbnails.您使用 固定的低分辨率缩略图。 You keep using your current implementation the full-size images.您继续使用当前实现的全尺寸图像。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM