Gatsby / Graphql - Can't display img from query

Question

Below is my code:

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


const ImageGallery = () => {


const data = useStaticQuery(graphql`
query {
  images: allFile(filter: { sourceInstanceName: {eq: "images" }}) {
    edges {
      node {
        relativePath
        childImageSharp {
          id
          fluid {
            originalImg
          }
        }
      }
    }
  }
}
`)

 // Filters all the images from "gallery-one"

 const galleryImages = data.images.edges.filter(edge => 
  edge.node.relativePath.startsWith("gallery-one")
 )

console.log(data)
console.log(galleryImages)


    return (
        <div>
            <h1>Gallery One</h1>
            {
             // Mapping over galleryImages array to display each image

              galleryImages.map((image) =>
                <div>
                // Returns relative path for each image
                {image.node.childImageSharp.fluid.originalImg}
                 // Returns nothing
                <Img fluid={image.node.childImageSharp.fluid.originalImg} />
                </div>
              )
            }
        </div>
    )
}


export default ImageGallery

With the first part in the map, it returns:

/static/3608211e3ce3f78486c9e344b92332d9/5f7bf/20171107_155145.jpg

/static/fccd9cdb1c9b525bfaf9282343d680a6/5f7bf/20171101_103124.jpg

/static/cdcbaebc030e210debc70bdff7a8d539/5f7bf/20171107_155126.jpg

/static/ef8708d7f536bd152c9ce98833d6d871/5f7bf/20171101_103218.jpg

/static/1c3b4e40cb5044e604009935b625fa38/5f7bf/20171101_103138.jpg

One for each image in the 'gallery-one' folder, but I cannot figure out how to get it to display using Gatsby Img.

I feel like this is really close, but I can't seem to figure it out

fluid={image.node.childImageSharp.fluid.originalImg}

Answer 1

Yes, you're almost there.

When you query an image to be displayed using gatsby-image you have 2 options:

• Use a GraphQL fragment:

  Instead of using originalImg you should use ...GatsbyImageSharpFluid which will provide to the fluid object all information required.

• Querying all the data required. In this case you should use:

   fluid (maxWidth: 800) { aspectRatio src srcSet sizes originalImg originalName }

  Disclaimer: the default maxWidth is 800px . If you don't set it, it will take the default value.

Once you gathered all the information, it needs to be passed to <Img> removing your originalImg , such as:

fluid={image.node.childImageSharp.fluid}

For further information check Gatsby Image API documentation .