Working with images in GatsbyJS

install npm deps:

npm install --save gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image

In gatsby-config.js

  plugins: [
    // ...
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    // ...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: "images",
      },
    },
    // ...
  ]

Display photo

In Layout.tsx

import Img from "gatsby-image"
// ...

const Layout = ({ children }: { children: React.ReactNode }) => {
  // ...
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      file(relativePath: { regex: "/bg-post/" }) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)
  
  return (
    <>
      <Img fluid={data.file.childImageSharp.fluid}></Img>
    </>
  )
Share:

About

My name is Max, also known as @mxkvl.

I am a software developer, currently working mostly with TypeScript, React and Node ecosystems.

I write a blog about topics that interest me most: programming languages in general, TypeScript, testing, writing and other great stuff.

Join the Mailing List