Install gatsby-image and source local images from the filesystem

Import a Local Image into a Gatsby Component with webpack

Use gatsby-image with an image from a relative path

Use gatsby-image's GraphQL fragments for blurred-up and traced SVG images

Use a local image from the static folder in a Gatsby component

Add multiple images from a directory with gatsby-image

Image Loading and Optimization in Gatsby with gatsby-image

Learn how to use image from the filesystem at a relative path with the gatsby-image plugin.

- [Written recipe for this video](https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-local-images-with-gatsby-image)
- [Gatsby documentation](https://www.gatsbyjs.org/docs/using-gatsby-image/)

Use gatsby-image with an image from a relative path

Share this video with your friends

Course

Image Loading and Optimization in Gatsby with gatsby-image