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

Posted 2023-03-08

【中文标题】Gatsby Wordpress ACF 图像字段返回“null”

【英文标题】：Gatsby Wordpress ACF Image fields are returning 'null'

【发布时间】：2019-09-17 18:12:12

【问题描述】：

我有一个 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 端点时，图像字段按预期返回。

有什么想法吗？

【问题讨论】：

同样的问题。突然，字段不再适用于 source_url。就像 gatsby 有某种限制，添加内容会以某种方式将某些页面向下推，并且不会为它们处理。

@KaiQing 你有没有找到更多关于这方面的信息，或者你找到了解决办法？

有点。不是在盖茨比的上下文中，而是更像是一个 wordpress 的。通过将我们的媒体库连接到 CDN 并将字段作为字符串传递，而不是让 gatsby 将它们拉入文件系统，我们设法避免了整个媒体编译部分的开发。最后，这很好用，但是在包含大量图像的页面上，我们确实会经历一些加载时间，但仍然比标准的 wordpress 安装要好。我们升级到了 gatsby 2。我认为这也有所帮助。

【参考方案1】：

确保您的 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 />