Dynamic Images are not displaying or rendering

[toddcoulson]

I am a newb with Gatsby, but have been building React apps professionally, for point of reference. I have the following class:

import * as React from "react"
    import { graphql } from "gatsby"
    import { GatsbyImage, getImage } from "gatsby-plugin-image"
    //import { StaticImage } from "gatsby-plugin-image"
    import LayoutNoFooter from "../components/LayoutNoFooter"

export default function announcements({data}) {
  const sponsors = data.allFile.nodes.filter((item)=>item.relativePath.includes('sponsors'))
  const callImages = () =>{
    sponsors.forEach((item)=>{
      console.log(item)
      const image = getImage(item)
      const gid = item.childImageSharp.gatsbyImageData
      return <GatsbyImage image={gid} alt="" />
      //return <GatsbyImage image={image} alt=""/>
    })

  }
  
  //console.log(data.allFile.nodes, sponsors)
  return (<>
    <LayoutNoFooter>
    <div>
    {callImages()}
    </div>
    
    </LayoutNoFooter>
  </>)
}

export const query = graphql`
query sponsorsPage {
allFile {       
  nodes {        
    relativePath         
    childImageSharp {         
      gatsbyImageData(width: 400)
    }
   }
  }
}`

Pardon me for the code dump, but the query at the bottom of the page displays the results I want in graphiql. I am also getting the results in my console logs. However, you can see the javascript I have to dynamically place images on the page in a loop in callImages method. I am trying to place it with either a getImage method or a gatsby image data, but neither one is displaying any images on the screen. Does anyone see anything that may not be in line with the proper gatsby technique?

[tomlschmidt]

Hi Todd,

you can either supply childImageSharp to getImage or childImageSharp.gatsbyImageData to the image prop directly. I would personally recommend using getImage.

I've also included two options for you for filtering the images by directory directly within from GraphQL.

import React from 'react'
import { graphql } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'

const Sponsors = ({ data }) => (
  <div>
    {data.allFile.nodes.map((sponsor) => (
      <>
        <GatsbyImage image={getImage(sponsor.childImageSharp)} />
        <GatsbyImage image={sponsor.childImageSharp.gatsbyImageData} />
      </>
    ))}
  </div>
)

export default Sponsors

export const query = graphql`
  query {
    allFile(
      filter: {
        relativeDirectory: { eq: "sponsors" }
        relativePath: { glob: "sponsors/*.jpg" }
      }
      sort: { name: ASC }
    ) {
      nodes {
        childImageSharp {
          gatsbyImageData
        }
      }
    }
  }
`

Please refer to the documentation for more information on that topic: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#dynamic-images