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.
This is all nice for local images. What if you have images coming from an API just as a string which is the image url. Can you use the Image component? Any ideas on how to use this?
Hey Joe, yes, it does add another layer of complexity for images from an API. You might want to look into the createRemoteFileNode API which is a helper in gatsby-source-filesystem or look into how it's implemented by plugins like [gatsby-plugin-remote-images] or even OS plugins from CMS providers like Contentful which process images from remote sources at build time to create image nodes.
This is all nice for local images. What if you have images coming from an API just as a string which is the image url. Can you use the Image component? Any ideas on how to use this?