为什么 [gatsby-plugin-image] 缺少 JSON 数据的图像道具答案

【问题标题】：Why is [gatsby-plugin-image] missing image prop for JSON data为什么 [gatsby-plugin-image] 缺少 JSON 数据的图像道具
【发布时间】：2022-01-28 17:27:19
【问题描述】：

目标：读取具有图像路径、相关标题、描述和 alt 的 JSON 数据。 graphql 将查询 JSON 数据并将其显示在四张卡片中。标题、描述和 alt 有效，但图像无效。 Console.log 显示：“[gatsby-plugin-image] Missing image prop”

const Expertise = () => {
    // query data
    const data = useStaticQuery(graphql`
        query ExpertiseQuery {
            allExpertiseJson {
                edges {
                    node {
                        alt
                        description
                        title
                        img {
                            childImageSharp {
                                gatsbyImageData
                            }
                        }
                    }
                }
            }
        }
    `)

    // iterate over JSON data
    function getExpertise(data) {
        const expertiseArray = []
        data.allExpertiseJson.edges.forEach((item, index) => {
            const image=getImage(item.node.img)
            expertiseArray.push(
                <ExpertiseCard key={index}>
                    <h3>{item.node.title}</h3>
                    <p>{item.node.description}</p>
                    <GatsbyImage>
                        image={image}
                        alt={item.node.alt}
                    </GatsbyImage>
                </ExpertiseCard>
            )
        })
        return expertiseArray
    }
    return (
        <ExpertiseContainer>
            <ExpertiseH1><span>|</span>Expertise</ExpertiseH1>
            <ExpertiseH2>Solution architect from lean design to agile development</ExpertiseH2>
            <CardContainer>
                {getExpertise(data)}
            </CardContainer>
        </ExpertiseContainer>
    )
}

JSON 数据：

[
    {
        "title": "Design Thinking",
        "description": "An ardent supporter of design thinking and emphathizing users to understand the entire spectrum of the problem space.",
        "img": "../images/design_thinking.jpg",
        "alt": "Design Thinking"
    },
    {
        "title": "Lean Startup",
        "description": "A practitioner of the Lean Startup principles for delivering business value and reduce product development cycle by designing MVP.",
        "img": "../images/design_thinking.jpg",
        "alt": "Design Thinking"
    }

【问题讨论】：

标签： javascript reactjs json gatsby gatsby-image

【解决方案1】：

您在以下位置遇到语法问题：

<GatsbyImage>
    image={image}
    alt={item.node.alt}
</GatsbyImage>

在这里，您将图像包装在 GatsbyImage 组件中，同时您需要将 image 属性传递给它，例如：

<GatsbyImage
    image={image}
    alt={item.node.alt}
/>

【讨论】：