从WordPress查询Gallery ACF中的图像时，GatsbyImage不起作用

Question

我在WordPress中使用图库ACF，我的console.log证明了我的查询和组件准确地获取了数据，然而，无论是在本地还是在生产版本中，图库图像都不会显示在我的页面上。有人能帮我弄清楚吗？

我的查询：

query GalleryQuery {
wpPage(databaseId: {eq: 41}) {
ACF_GalleryPage {
gallery {
id
altText
localFile {
childImageSharp {
gatsbyImageData
fluid {
base64
tracedSVG
srcWebp
srcSetWebp
originalImg
originalName
src
}
fixed {
src
}
}
}
}
}
}
}

我的组件：

export default function GalleryPortfolio() {
const data = useGalleryQuery()
return (
<Section>
<Container>
{data.wpPage.ACF_GalleryPage.gallery.map(localFile => {
console.log(localFile.localFile.childImageSharp.fluid.src);
<GatsbyImage image={localFile.localFile.childImageSharp.fluid.src} alt="" />

})}
</Container>
</Section>
)
}

Answer 1

您正在混合gatsby-image(来自《盖茨比1》和《盖茨比2》(和gatsby-plugin-image(从《盖茨比3》开始(。更具体地说，您正在运行gatsby-image查询(具有fluid或fixed属性(，并使用只接受image属性而不接受fixed或fluid的gatsby-plugin-image组件(GatsbyImage(。

也就是说，删除gatsby-image引用并检查迁移指南，以确保使用正确的配置。最后，你需要在你的gatsby-config.js:中有这样的东西

module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}

此配置将在获取ACF映像时创建正确的节点，而不是现在的fluid或fixed。

因为您已经有了一个gatsbyImageData节点，所以似乎您有两个插件在运行和创建它们自己的节点，所以一旦您去掉了gatsby-image，查询应该看起来像：

query GalleryQuery {
wpPage(databaseId: {eq: 41}) {
ACF_GalleryPage {
gallery {
id
altText
localFile {
childImageSharp {
gatsbyImageData
}
}
}
}
}
}

然后只需将gatsbyImageData作为image:传递即可

export default function GalleryPortfolio() {
const data = useGalleryQuery()
return (
<Section>
<Container>
{data.wpPage.ACF_GalleryPage.gallery.map(localFile => {
console.log(localFile.localFile.childImageSharp.fluid.src);
<GatsbyImage image={localFile.localFile.childImageSharp.gatsbyImageData} alt="" />

})}
</Container>
</Section>
)
}