Add multiple images from a directory with gatsby-image
Learn how to query multiple local images so they can easily be displayed on a Gatsby site side-by-side.
- Written steps related to this video
- Working with images in Gatsby
Instructor: [0:00] Import image from gatsby-image, as well as GraphQL newStaticQuery from Gatsby into your component. Then write a query that will filter for a collection of images in the file system directory, rather than just a single image. You can filter for images of a certain type, like JPEG, on the extension field.
[0:15] You can use the relative directory field to only get files from where you want. Then choose fields under childImageSharp that you need to pass into the component. The defaults you need under fluid are aspect ratio, base64, sizes, source, and source set.
[0:31] Copy the query into your component, map through the data returned, and pass the fluid data into the prop on each image component. To provide alt text, you can split the file extension from the base field.
[1:00] To recap, import packages, write a query to get all image data from a folder, and then map through the data to create a gatsby-image component for each file.