How do I query multiple images with gatsby-image?

Question

I have 16 images that I want to render out onto a website in a grid format.

I\'m using the following plugins for this:

• gatsby-image
• <

Answer 1

The easiest way is to create an image provider:

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Img from 'gatsby-image'

const Image = ({ fileName, alt, style }) => {
  const { allImageSharp } = useStaticQuery(graphql`
    query {
      allImageSharp {
        nodes {
          fluid(maxWidth: 1600) {
            originalName
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)

  const fluid = allImageSharp.nodes.find(n => n.fluid.originalName === fileName)
    .fluid

  return (
    

      
    
  )
}

export default Image;

And then, after importing, easily insert the image which you need: