Query images from Markdown files, then render them

index.js

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

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

export default props => {
  const { fixed } = props.data.fixedImage.childImageSharp
  const { fluid } = props.data.fluidImage.childImageSharp
  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Img fixed={fixed} />
      <Img fluid={fluid} />
      <Link to="/page-2/">Go to page 2</Link>
    </Layout>
  )
}
export const pageQuery = graphql`
  query {
    fixedImage: file(
      relativePath: { eq: "james-mccullough-Znxkw16UKG0-unsplash.jpg" }
    ) {
      childImageSharp {
        fixed(height: 460) {
          ...GatsbyImageSharpFixed
        }
      }
    }
    fluidImage: file(
      relativePath: { eq: "james-mccullough-Znxkw16UKG0-unsplash.jpg" }
    ) {
      childImageSharp {
        fluid(maxWidth: 700) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }