git.iko.soy/rowtype-yoga/psfp
on 081ef00 help sign in
rowtype-yoga/psfp/blog/src/components/image.js
32 lines 982 B history raw
1import React from 'react'
2import { StaticQuery, graphql } from 'gatsby'
3import Img from 'gatsby-image'
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 * `StaticQuery`, 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.app/gatsby-image
13 * - `StaticQuery`: https://gatsby.app/staticquery
14 */
16const Image = () => (
17 <StaticQuery
18 query={graphql`
19 query {
20 placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
21 childImageSharp {
22 fluid(maxWidth: 300) {
23 ...GatsbyImageSharpFluid
24 }
25 }
26 }
27 }
28 `}
29 render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
30 />
32export default Image