1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Add multiple images from a directory with gatsby-image

    Kyle GillKyle Gill
    gatsbyGatsby
    graphqlGraphQL

    Learn how to query multiple local images so they can easily be displayed on a Gatsby site side-by-side.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.