diff options
Diffstat (limited to '@linaria/examples/gatsby/custom-config/src/components/image.js')
-rw-r--r-- | @linaria/examples/gatsby/custom-config/src/components/image.js | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/@linaria/examples/gatsby/custom-config/src/components/image.js b/@linaria/examples/gatsby/custom-config/src/components/image.js new file mode 100644 index 0000000..e61edb6 --- /dev/null +++ b/@linaria/examples/gatsby/custom-config/src/components/image.js @@ -0,0 +1,32 @@ +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 |