GatsbyImage 无法在生产站点中工作（从 WP CMS 中提取数据）

Question

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

我正在使用 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 and 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.

Answer 1

你试过只用：

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

GatsbyImage 无法在生产站点中工作（从 WP CMS 中提取数据）

GatsbyImage not working in production site (Pulling data from WP CMS)

wordpress

image

reactjs

graphql

gatsby