Go Pro Sign Up Login

Buy Now and unlock this series

$

44

.99

$

34

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Gatsby Image

Now, we are going to turn the visual design of our blog up a notch by adding some images. We will be using a few new plugins: gatsby-plugin-sharp, gatsby-transformer-sharp, and gatsby-image. These will allow us to have optimized and transformed images that give us an awesome loading effect.

Downloads

Become a pro to download code and videos

Comments

Adam

about 1 year ago [edited]

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} />

Adam

about 1 year ago [edited]

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.

User avatar

Christopher C

almost 2 years ago

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

CD

almost 3 years ago

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?

Want to join the conversation?

Become a Pro member today!