Gatsby-plugin-image：更新 Gatsby 客户端后缺少图像道具

Question

我正在构建一个包含 Contentful 和 GraphQL 查询的 GatsbyJs 博客。在我更新我的 GatsbyJs 客户端、npm 版本并更改内容的结构之前，一切都运行良好。

现在我的登录页面无法加载图像，并且在控制台中出现错误 [gatsby-plugin-image] Missing image prop。

我的代码：

    import * as React from "react"
import { Link, graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

import {Container, Row, Col, Button} from "react-bootstrap"

import {stars} from "../utilities/starSystem.js"
import "bootstrap/dist/css/bootstrap.min.css";
import 'bootstrap-icons/font/bootstrap-icons.css';
import "../styles/index.css"

class BlogIndex extends React.Component{
  

  render(){

    const { data } = this.props;
    const siteTitle = data.site.siteMetadata.title;
  
      
    return (
      <Layout location={this.props.location} title={siteTitle}>
        <Seo title="Ολά τα άρθρα" />


        <Container>
  
          <Row>
            <Col>
            </Col>
          </Row>
        </Container>

        <Container>
          {data.allContentfulBlogPost.edges.map(post => (
            <section className="book_row">
           <Row>
             <Col xl={6} lg={6} m={3}><div className="eikona"><GatsbyImage className="featured-image" image={getImage(post.node.featuredImage)} alt={post.node.title}/> </div> </Col>
             <Col xl={6} lg={6} m={9}>
               <Button className="custom-button">Non-fiction</Button>
               <h1 className="post-title">{post.node.title}</h1>
               <Row><Col lg={3} className='author-column'><h3 className="author-title">Yuval Harari</h3></Col> 
               <Col> {stars(4)}</Col></Row>
               <p className="perilipsi">{post.node.excerpt.excerpt}</p>
               
              </Col>
           </Row>
           </section>
        ))}
        </Container>
       
  
    </Layout>)
    }
    }

export default BlogIndex;

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allContentfulBlogPost(sort: {order: DESC, fields: publishedDate}) {
      edges {
        node {
          title
          excerpt {
            excerpt
          }
          slug
          publishedDate(formatString: "DD-MM-YY")
          featuredImage {
            gatsbyImageData(width: 230, cropFocus: CENTER, placeholder: BLURRED, resizingBehavior: SCALE)
          }
          body {
            raw
          }
          author
          category
        }
      }
    }
    latest: allContentfulBlogPost(
      sort: {order: DESC, fields: publishedDate}
      limit: 1
    ) {
      edges {
        node {
          title
          featuredImage {
            gatsbyImageData(width: 300)
          }
          publishedDate(formatString: "DD-MM-YY")
          excerpt {
            excerpt
          }
        }
      }
    }
  }
`

当我执行查询时，结果似乎很好：

{
  "data": {
    "allContentfulBlogPost": {
      "edges": [
        {
          "node": {
            "featuredImage": {
              "gatsbyImageData": {
                "images": {
                  "sources": [
                    {
                      "srcSet": "//images.ctfassets.net/xp88oy0wq1rq/1bgvqRwgZqApVxQeYRCkub/14d2ea0bf162b413bf66c91794e2b34e/sapiens-5.jpg?w=58&h=88&q=50&fm=webp&fit=scale&f=center 58w,\n//images.ctfassets.net/xp88oy0wq1rq/1bgvqRwgZqApVxQeYRCkub/14d2ea0bf162b413bf66c91794e2b34e/sapiens-5.jpg?w=115&h=174&q=50&fm=webp&fit=scale&f=center 115w,\n//images.ctfassets.net/xp88oy0wq1rq/1bgvqRwgZqApVxQeYRCkub/14d2ea0bf162b413bf66c91794e2b34e/sapiens-5.jpg?w=230&h=347&q=50&fm=webp&fit=scale&f=center 230w",
                      "sizes": "(min-width: 230px) 230px, 100vw",
                      "type": "image/webp"
                    }
                  ],
                  "fallback": {
                    "src": "//images.ctfassets.net/xp88oy0wq1rq/1bgvqRwgZqApVxQeYRCkub/14d2ea0bf162b413bf66c91794e2b34e/sapiens-5.jpg?w=230&h=347&fl=progressive&q=50&fm=jpg&fit=scale&f=center",
                    "srcSet": "//images.ctfassets.net/xp88oy0wq1rq/1bgvqRwgZqApVxQeYRCkub/14d2ea0bf162b413bf66c91794e2b34e/sapiens-5.jpg?w=58&h=88&fl=progressive&q=50&fm=jpg&fit=scale&f=center 58w,\n//images.ctfassets.net/xp88oy0wq1rq/1bgvqRwgZqApVxQeYRCkub/14d2ea0bf162b413bf66c91794e2b34e/sapiens-5.jpg?w=115&h=174&fl=progressive&q=50&fm=jpg&fit=scale&f=center 115w,\n//images.ctfassets.net/xp88oy0wq1rq/1bgvqRwgZqApVxQeYRCkub/14d2ea0bf162b413bf66c91794e2b34e/sapiens-5.jpg?w=230&h=347&fl=progressive&q=50&fm=jpg&fit=scale&f=center 230w",
                    "sizes": "(min-width: 230px) 230px, 100vw"
                  }
                },
                "layout": "constrained",
                "width": 230,
                "height": 347.2804532577903,
                "placeholder": {
                  "fallback": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAeABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQDBQYJ/8QAKBAAAgIBBAEDAwUAAAAAAAAAAQIDBBEABRIhMRNBUQYUYRVCgZGx/8QAFQEBAQAAAAAAAAAAAAAAAAAABAL/xAAfEQEAAgEDBQAAAAAAAAAAAAABABECAxJRBCFBYaH/2gAMAwEAAhEDEQA/AOk96nYnWNqzIp4gHm7gfPQUjSMNHcpJBzVIl6JJsSn39gG1Bb3T6fjv3Y7vGKeAIZTKCA+YywIHuOKnvGMqR2R1TbJv+zS/qkm6Q06LVbBWJo52kLQDAjdh5QnkQVP5/OhbjmOOn1mqwe/p8zY2IxGUUZIVQMk5P9nzo0tWkpyV1+xZXrqWQFSSOQYhuz+c6NVDojTFN92rZrMbRz0KU1myojkZvTSUIwIZ8t30vLx5wdK1a1W3Jwn+mtvhWYATSFoXHEeM4GT4GOv80vvNJt1uLP6G32EwFC3avNlUL12GH7i3Xwx0muz2ESRY62zRh1ZfTFJuDZdGyw599Iox14HwNRRxF456u0DP6zWpFViijNJIUrOvqJ6AARs98hjo5850ar6+4fb1oYpwDIgIxCnFAuTxAGfYYH8aNXCt23P/2Q=="
                }
              }
            }
          }
        }
      ]
    }
  }
}

如有任何帮助或建议，我们将不胜感激！

Answer 1

Maybe is something wrong with ".getImage"

当然。 getImage 是一个辅助函数，如果存在 null 值（空安全），则 returns 未定义：

Safely get a gatsbyImageData object. It accepts several different sorts of objects, and is null-safe, returning undefined if the object passed, or any intermediate children are undefined.

我认为您只需要提供 gatsbyImageData 而不是 featuredImage 节点，因此您的最终代码应该如下所示：

getImage(post.node.featuredImage.gatsbyImageData)

Gatsby-plugin-image：更新 Gatsby 客户端后缺少图像道具

Gatsby-plugin-image: Missing image prop after updating Gatsby Client

frontend

reactjs

graphql

gatsby

gatsby-image