[英]How should I use Gatsby.js to generate both the thumbnails and full-size images
如果我需要图片的缩略图(即低分辨率版本)和全尺寸版本,我该怎么办。
我有一个中等风格的图像缩放组件( 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
来实现我想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.