import {graphql, useStaticQuery} from 'gatsby'; import Img from 'gatsby-image' const data = useStaticQuery(graphql` query Images { images: allFile(filter: {relativeDirectory: {eq: "Medicare"}}) { nodes { id childImageSharp { fixed ( width: 200, height: 200 ){ ...GatsbyImageSharpFixed } } } } image: file(relativePath: {eq: "logo.png"}) { id childImageSharp { fixed ( width: 400 ){ ...GatsbyImageSharpFixed } fluid { ...GatsbyImageSharpFluid } } } } `) <Img fixed={data.image.childImageSharp.fixed} alt="logo" /> <Img fluid={data.image.childImageSharp.fluid} alt="logo" /> <div className="gallery"> { data.images.nodes.map((image)=> <Img key={image.id} fixed={image.childImageSharp.fixed} />) } </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter