Question 22467 in SEO Question posted in
Some basic information to get you started with this can be found here.

Can't display images sourced from GraphQL, error [gatsby-plugin-image] missing image prop – SEO

I’m trying to source content with images from Contentful into Gatsby but I failed to get images displayed.

I installed gatsby-transformer-sharp, gatsby-plugin-image, gatsby-plugin-sharp, gatsby-remark-images and gatsby-remark-images-contentful.

down below is a simple of my code

import { GatsbyImage, getImage } from "gatsby-plugin-image"

const Projects = ({ data }) => {
  const projects = data.projects.nodes
  return (
    <Layout>
      <Seo
        title={"Projects"}
        description={"Projects & Websites I've Developed"}
      />
      <div className={styles.portfolio}>
        <h1>My Portfolio</h1>
        <h2>Projects & Websites I've Developed</h2>
        <div className={styles.projects}>
          {projects.map(project => (
            <Link
              to={"/projects/" + project.slug}
              key={project.id}
              className={styles.project}
            >
              <GatsbyImage
                image={getImage(project.thumb)}
                alt={project.title}
              />
              <div className={styles.cardText}>
                <h3>{project.title}</h3>
                <p>{project.stack}</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </Layout>
  )
}

export default Projects

export const query = graphql`
  query ProjectsPage {
    projects: allContentfulProjects(sort: { fields: date, order: DESC }) {
      nodes {
        key
        slug
        stack
        title
        thumb {
          gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
        }
        id
      }
    }
  }
`

here what i got from GraphQL

{
  "data": {
    "projects": {
      "nodes": [
        {
          "key": "project",
          "slug": "portfolio-website",
          "stack": "html - css - javascript",
          "title": "Portfolio Website",
          "thumb": [
            {
              "gatsbyImageData": {
                "images": {
                  "sources": [
                    {
                      "srcSet": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=750&h=361&q=50&fm=webp 750w,nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1080&h=520&q=50&fm=webp 1080w,nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1366&h=658&q=50&fm=webp 1366w,nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=webp 1920w",
                      "sizes": "100vw",
                      "type": "image/webp"
                    }
                  ],
                  "fallback": {
                    "src": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=png",
                    "srcSet": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=750&h=361&q=50&fm=png 750w,nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1080&h=520&q=50&fm=png 1080w,nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1366&h=658&q=50&fm=png 1366w,nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=png 1920w",
                    "sizes": "100vw"
                  }
                },
                "layout": "fullWidth",
                "width": 1,
                "height": 0.4817708333333333,
                "placeholder": {
                  "fallback": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAMAAACDi47UAAABv1BMVEUaGhosLSN+gm9ORjIcHBwlJB8kJBgkJBclJBgeHRREORVFWEeEj5SNingqNys+x8tWzNFk1Nhq1dl42Nx51dp219xw19twxMhjyMxKys89x8wnZlw7MhUiIRtrKiRCLCBHys5bztJu1tuD2t501tp62N1519yokpF3b25My9A/yc4oZ10VFRUkJCQoKChHR0c1NTUqKSotOCxEw8dbxcllys1owcR30dR2z9Nyz9NkyM2+n52cjo0/wsc5vsMrXVNdTx2niSCnjCqniiOfgyAtOC1HsbVRq69errJcpah1y8982N1u1dpto7F7RlG7lpeLWXVFr7koYFYtKiJJQyxTTDZMRS9DPSssNytNk5VWf3VbfWVWdVlnsKxryc1ays+xJ06sCy2sCS2wCi2bJkYrXlUjIyMuLi48PDw0NDQsLCwrNyw6n6I/j5BJlZBJlJFavL5Xxco4v8XDEz+QCiSqCSuHCiCJDidhKS07OzszMzMeHRk4NSg7OCs5NSk5NSg6Nio5Nik7Nys6NyocGhI6OjkxMTEYGBgmJiUmJiYjJCQlJSUXFxcWFhYRERE0Lhw7NBxBORwpJRswMDA0NTUvbwraAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAB3RJTUUH5gUJBR4Qdhx/lQAAAGRJREFUCNeNzUEKglAAANEZ/5cgRLTO0ZWCTtS6jdfxEJ5BUNyF+FuIiNSit5zNiKuUAbBAMHLWqfQgctGJWsdqrze/9PH6Z+R3hNphe8z5HFIgQuFQqHbtHSVlyFN9n3w92DQfWKcTSK8wndgAAAAASUVORK5CYII="

what it might be wrong with My code? need some help 🙂

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally I have figured it out by

    1- I removed all My content and images in Contentful CMS and create a fresh ones, It seemed there was a bug with sourcing Images into GraphQL where the Image src was always giving an empty array!!

    2- Taking out getImage function and replace it with <GatsbyImage image={project.thumb.gatsbyImageData} alt={project.title}/> ,then gatsby clean to clear the .cashe and also triggered clean cashe and rebuild.

    Now everything is works well.


  2. 0

    According to what you said in the comment section, I’d say that there’s a position in projects that has no thumbnail defined (or not properly queried).

    Try adding a condition wrapping the GatsbyImage display:

     {project.thumb && <GatsbyImage
        image={getImage(project.thumb)}
        alt={project.title}
      />}

    That said, check in which project you have no thumbnail.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search