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

Posted 2023-03-08

【中文标题】Gatsby-plugin-image：更新 Gatsby 客户端后缺少图像道具

【英文标题】：Gatsby-plugin-image: Missing image prop after updating Gatsby Client

【发布时间】：2021-12-10 06:26:08

【问题描述】：

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

现在我的登录页面无法加载图片，在控制台中出现错误[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=="
                
              
            
          
        
      ]
    
  

任何帮助或建议将不胜感激！

【问题讨论】：

您是否检查过所有帖子中的图片是否有效？

嗨，费兰！我对单个帖子进行了相同的尝试，该帖子具有有效数据但仍然无法正常工作。我安装了 React Dev 工具，发现缺少的道具是“image:undefined”，但是当我执行查询时，所有数据似乎都是有效的。也许“.getImage”有问题？？？

【参考方案1】：

也许“.getImage”有问题

绝对。 getImage 是一个辅助函数，如果有 null 值（空安全），则返回 undefined：

安全地获取gatsbyImageData 对象。它接受几种不同的 各种对象，并且是 null 安全的，如果对象返回 undefined 已通过，或任何中间子级未定义。

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

getImage(post.node.featuredImage.gatsbyImageData)

【讨论】：

不，完全一样的结果！

嗯...因为它是一个辅助函数，你不需要使用它。直接试试：image=post.node.featuredImage.gatsbyImage

我实际上使用了 post.node.featuredImage.gatsbyImageData，现在everythink 又开始工作了！你是今天的英雄！非常感谢您抽出宝贵的时间，我正在寻找这两天！请更新您的答案，我会接受！