Gatsby StaticImage from array

Question

I am trying to make an image slider with React and Gatsby but the images aren't rendering and I get this in console

static-image.server.tsx:51 No data found for image "undefined"
              Could not find values for the following props at build time: src 

This is my code. When I change the image source to '../images/1.png' instead of images[sliderIndex] the image will show.

const ImageSlider = (props) => {

  const [sliderIndex, setSliderIndex] = useState(0);
  const images = ['../images/1.png', '../images/2.png']

  useEffect(() => {
    const sliderLoop = setInterval(() => {
      if(sliderIndex+1 > images.length-1) {
        setSliderIndex(0)
      } else {
        setSliderIndex(sliderIndex+1)
      }
    }, 5000)
    return () => clearInterval(sliderLoop)
  }, [sliderIndex])

  console.log(sliderIndex)

  return (
    <>
      {props.children}
      <StaticImage src={images[sliderIndex]} alt=""/>
    </>
  )
}

Answer 1

<StaticImage /> would only works with a static string, see this part of the docs for more info.

You'd have to use the <GatsbyImage /> component instead & query image data manually, as instructed here. I copied the relevant sample code below.

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function BlogPost({ data }) {
  const image = getImage(data.blogPost.avatar)
  return (
    <section>
      <h2>{data.blogPost.title}</h2>
      <GatsbyImage image={image} alt={data.blogPost.author} />
      <p>{data.blogPost.body}</p>
    </section>
  )
}
export const pageQuery = graphql`
  query {
    blogPost(id: { eq: $Id }) {
      title
      body
      author
      avatar {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  }
`