GatsbyImage 在生产站点中不起作用（从 WP CMS 中提取数据）

Posted 2023-03-08

【中文标题】GatsbyImage 在生产站点中不起作用（从 WP CMS 中提取数据）

【英文标题】：GatsbyImage not working in production site (Pulling data from WP CMS)

【发布时间】：2021-08-14 12:16:03

【问题描述】：

编辑：通过将公共构建文件移动到服务器的根目录来解决问题。

我正在使用 Wordpress CMS 将精选图片设置为帖子，并尝试在 Gatsby 中呈现这些图片。

到目前为止，它在查看开发中的站点时可以正常工作（使用“gatsby develop”），但是当我构建实际的静态站点（使用“gatsby build”）时，没有显示特色图像。

我如何渲染特色图像的示例：

<GatsbyImage image=getImage(post.node.featuredImage.node.localFile) alt=post.node.title/> : 
<img src="https://via.placeholder.com/1600x800" alt=post.node.title || ""/>

这是 GraphQL 查询：

export const query = graphql`
  query 
    allWpPost 
      edges 
        node 
          title
          featuredImage 
            node 
              localFile 
                childImageSharp 
                  gatsbyImageData(
                    placeholder: DOMINANT_COLOR
                    formats: [JPG, WEBP, AVIF]
                    quality: 90
                  )
                
              
            
           
        
      
    
  
`

这似乎是根据文档从 CMS 渲染动态图像的推荐方法。使用gatsby-plugin-image 和gatsby-transformer-sharp.

The getImage() function is an optional helper to make your code easier to read. It takes a File and returns file.childImageSharp.gatsbyImageData, which can be passed to the GatsbyImage component. 

【参考方案1】：

您是否尝试过仅使用：

<GatsbyImage image=post.node.featuredImage.node.localFile.childImageSharp.gatsbyImageData alt=post.node.title/> 

【讨论】：

我刚做了。同样的结果:(

因此您的构建命令不会下载资产。能再调试一下吗？

好吧，我调试了我所知道的，似乎找不到任何问题。有趣的是，当我在 gatsbyImageData 查询中设置“placeholder: blurred”或“dominantcolor”时，动态占位符会起作用。我实际上可以看到正确的主色或超级模糊的图像，具体取决于设置。

渲染的屏幕主机：i.imgur.com/2uKO9wN.png

想通了。这是微不足道的，我的错。我将静态站点文件设置在本地服务器的子根目录中，而 gatsby 生成的图像路径没有考虑到这一点并且得到 404。感谢您的帮助。