Unable to render my Images with Gatsby and Strapi, tried different queries as well

Question

im trying to render a single image using Gatsby and Strapi and I have not been able to do so,

Here is my current GraphiQL query, I have not been able to find a local option and when I utulize the childImageSharp I get no image either.

export const query = graphql`
  {
    allStrapiProject {
      nodes {
        description
        featured
        github
        id
        slug
        title
        url
        stack {
          id
          title
        }
        image {
          id
        }
      }
    }
  }
`

Here is my Gatsby Component

  description,
  title,
  github,
  stack,
  url,
  image,
  index,
  slug,
 }) => {
  return(
     <article className="project">
    <GatsbyImage 
      image={getImage(image)}
      className="project-img"
      alt={title}
     />
    <div className="project-info">
    <span className="project-number">0{index + 1}.</span>
    <Link to={`/rpojects/${slug}`} className="project-slug">
    <h3>{title}</h3>

    </Link>
   <p className="project-desc">{description}</p>
    <div className="project-stack">
      {stack.map(item => {
        return <span key={item.id}>{item.title}</span>
        
      })}
   </div>
    <div className="project-links">
      <a href={github}>
        <FaGithubSquare className="project-icon">
       </FaGithubSquare>
       </a>
      <a href={url}>
        <FaShareSquare className="project-icon">
       </FaShareSquare>
       </a>


    </div>



    </div> 
    </article>
  )
}

export default Project

Here is a screen shot of the actual project in development, everything else works perfectly fine.

Answer 1

You hit the nail with your issue: you need childImageSharp or localFile nodes (which hold your image data) to display the image.

You should look for something like:

{
  allStrapiProject {
    edges {
      node {
        id
        image {
          publicURL
        }
        multipleImages {
          localFile {
            publicURL
          }
        }
      }
    }
  }
}

Otherwise, your Strapi configuration should be wrong.

The implementation with GatsbyImage component looks good since fixed the node, your code should work alone.

If you can provide more details about your gatsby-config.js or a configuration of your localhost:8000/___graphql (where all the nodes are displayed) I can detail my answer.

Remember to clean cache in each trial with gatsby clean.