Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Setup Gatsby-image

gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations.


Install necessary NPM packages


Install the gatsby-source-filesystem plugin in gatsby-config.js replace path with ""

<GatsbyPlugin name="gatsby-source-filesystem" key="src/pages" options={{ name: src pages directory, path: src/pages, }} />


Sweet, now it's ready to go.

Let's also write out an example stylesheet and page you can use to play with gatsby-image.

Read more about gatsby-image in the Gatsby documentation site:

https://www.gatsbyjs.org/packages/gatsby-image/

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<Img fixed={data.file.childImageSharp.fixed} />
</div>
)
export const query = graphql`
query {
file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
fixed(width: 125, height: 125) {
...GatsbyImageSharpFixed
}
}
}
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.