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