我有一个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
端点时,图像字段会按预期返回。
有什么想法吗?
确保您的 acf 字段输出的是图像的 url 而不是对象。如果您使用的是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} />