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
.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.