33 lines
977 B
TypeScript
33 lines
977 B
TypeScript
|
import React from "react"
|
||
|
import { useStaticQuery, graphql } from "gatsby"
|
||
|
import Img from "gatsby-image"
|
||
|
|
||
|
/*
|
||
|
* This component is built using `gatsby-image` to automatically serve optimized
|
||
|
* images with lazy loading and reduced file sizes. The image is loaded using a
|
||
|
* `useStaticQuery`, which allows us to load the image from directly within this
|
||
|
* component, rather than having to pass the image data down from pages.
|
||
|
*
|
||
|
* For more information, see the docs:
|
||
|
* - `gatsby-image`: https://gatsby.dev/gatsby-image
|
||
|
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
|
||
|
*/
|
||
|
|
||
|
const Image = () => {
|
||
|
const data = useStaticQuery(graphql`
|
||
|
query {
|
||
|
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
|
||
|
childImageSharp {
|
||
|
fluid(maxWidth: 300) {
|
||
|
...GatsbyImageSharpFluid
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
`)
|
||
|
|
||
|
return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
|
||
|
}
|
||
|
|
||
|
export default Image
|