Lazy Image Loading

image.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={ data => {
      return (
        <div>
          <Img
            alt={props.alt}
            fluid={image.node.childImageSharp.fluid}
          />
        </div>
      )
    }}
  />
)

export default Image