graphql - 使用 gatsby-image 和 graphql 获取图像时不断出错

Question

我正在尝试添加来自 graphql 的图像。我现在已经遇到过几次这个问题，并且总是幸运地解决了这个问题。

查询图像时，我得到以下响应：

“路径”参数必须是字符串、缓冲区或 URL 类型之一。接收类型未定义

代码如下：

import React from 'react'
import { Link, graphql, useStaticQuery, StaticQuery } from 'gatsby'
import Img from 'gatsby-image'
import './longCard.css';

const CardData = props => {

    const slug = props.slug;
    return (
        <StaticQuery
            query={
                graphql`
            query($slug: String) {
                sanityProduct(slug: {current: {eq: $slug}}) {
                    slug{ 
                        current
                    }
                    title
                    featured_image {
                        asset {
                            childImageSharp {
                                fixed {
                                    ...GatsbyImageSharpFixed
                                }
                            }
                        }
                    }
                }
            }
`}
            render={data => <LongCard />}
        />
    )
}

export default CardData

export const LongCard = ({ data }) => {
    return (
        <div className="long-card">
            <div className="long-card-inner">
                <Link to={data.sanityProduct.slug.current}>{data.sanityProduct.title}</Link>
                {/* Add image */}
                <Img fixed={data.featured_image.asset.childImageSharp.fixed} />
            </div>
        </div>

    )
}

标签： graphqlgatsby

Answer 1

我不需要 ChildImageSharp 部分，我认为这仅用于查询文件系统。