-
Notifications
You must be signed in to change notification settings - Fork 1
/
Image.js
41 lines (35 loc) · 839 Bytes
/
Image.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import { ImageLayout } from '../styles/ImageLayout'
const Image = ({ name, alt, minWidth }) => {
const data = useStaticQuery(graphql`
query {
images: allFile {
edges {
node {
relativePath
name
childImageSharp {
fluid(maxWidth: 350) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`)
const image = data.images.edges.find((item) => {
return item.node.relativePath.includes(name)
})
if (!image) {
return null
}
return (
<ImageLayout minWidth={minWidth}>
<Img fluid={image.node.childImageSharp.fluid} alt={alt} />
</ImageLayout>
)
}
export default Image