Gatsby Image

My changes to work w/ the gatsby-plugin-image package:

Import

import { GatsbyImage } from 'gatsby-plugin-image'

Query

  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
      file(relativePath: { regex: "/bg/" }) {
        childImageSharp {
          gatsbyImageData(layout: FULL_WIDTH)
        }
      }
    }
  `)

Image

 <GatsbyImage image={data.file.childImageSharp.gatsbyImageData} />

gatsby-image has been deprecated in favor of gatsby-plugin-image. This plugin is part of the started gatsby project in gatsby v3.x. FYI

See https://www.gatsbyjs.com/plugins/gatsby-image/?=gatsby-image for more info.

My regex wasn't working in graphql for regex: "/bg/" I actually had to do regex: "/^bg/gm"

What if you weren't querying but rather returning a collection of API data and you wanted to map() over that data in your component, including images?