image.js (979B)
1 import React from 'react'; 2 import { useStaticQuery, graphql } from 'gatsby'; 3 import Img from 'gatsby-image'; 4 5 /* 6 * This component is built using `gatsby-image` to automatically serve optimized 7 * images with lazy loading and reduced file sizes. The image is loaded using a 8 * `useStaticQuery`, which allows us to load the image from directly within this 9 * component, rather than having to pass the image data down from pages. 10 * 11 * For more information, see the docs: 12 * - `gatsby-image`: https://gatsby.dev/gatsby-image 13 * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ 14 */ 15 16 function Image() { 17 const data = useStaticQuery(graphql` 18 query { 19 placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { 20 childImageSharp { 21 fluid(maxWidth: 300) { 22 ...GatsbyImageSharpFluid 23 } 24 } 25 } 26 } 27 `); 28 return <Img fluid={data.placeholderImage.childImageSharp.fluid} />; 29 } 30 31 export default Image;