Question

我有一个GatsbyJS网站，它通过gatsby-source-wordpress使用了Wordpress的数据。直到昨天我的查询开始失败时，一切运行良好。我正在使用高级自定义字段，并且无法再查询图片字段，当我收到所有帖子类型为“项目”的帖子时，我的查询如下所示：

allWordpressWpProject {
    edges {
        node {
            title
            slug
            path
            link
            acf {
                project_banner_title
                project_slider_image {
                    source_url
                    alt_text
                }
                project_navigation_image {
                    source_url
                    alt_text
                }
                project_banner_image {
                    source_url
                    alt_text
                }
            }
        }
    }
}

但是所有图像字段现在都返回null。当我通过Wordpress运行查询或手动点击wp-json端点时，图像字段将按预期返回。

有什么想法吗？

Answer 1

确保您的acf字段输出的是图片而不是对象的网址。如果您使用的是gatsby-image-sharp，则应将这些内容放入查询中。

allWordpressWpProject {
    edges {
        node {
            title
            slug
            path
            link
            acf {
                project_banner_title
                project_slider_image {
                    localFile {
                        childImageSharp {
                            fluid(maxWidth: 600) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
                project_navigation_image {
                    localFile {
                        childImageSharp {
                            fluid(maxWidth: 600) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
                project_banner_image {
                    localFile {
                        childImageSharp {
                            fluid(maxWidth: 600) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
            }
        }
    }
}

然后您可以像这样使用gatsby-image：

const sliderOne = data.allWordpressWpProject.edges.node.acf.project_slider_image.localFile.childImageSharp.fluid;

<Img fluid={sliderOne} alt={project_banner_title} />

Gatsby Wordpress ACF图像字段返回“空”

1 个答案: