Question

我正在尝试添加来自graphql的图像。我已经遇到了几次这个问题，而且总是以失败告终。

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

“ path”参数必须是字符串，Buffer或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>

    )
}

Answer 1

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

使用gatsby-image和graphql

1 个答案: