如何将 FuturedImage 设置为 og: image.在 gatsby.js

Question

我使用 gatsby.js.

我想在meta标签的og:image属性中设置markdown中描述的featuredimage，但是不行

featuredimage经过gatsby针对不同的路径进行了优化，但是在build之前设置了相对路径为物理路径

如何设置构建创建的特色图像的路径？

我的 React Helmet 代码（摘录）：

<Helmet
    meta={{
      property: `og:image`,
      content: `https://example.com/${post.frontmatter.featuredimage.relativePath}`
    }}
 />

我的 GraphQL 查询：

export const pageQuery = graphql`
  query($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    mdx(fields: { slug: { eq: $slug } }) {
      frontmatter {
        featuredimage {
          relativePath
          childImageSharp {
            fluid(maxWidth: 400, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

谢谢。

Answer 1

您可以查询生成图像的路径（格式为“/static/name”）并将其与站点根目录 url 一起使用，例如：

export const pageQuery = graphql`
  query($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    mdx(fields: { slug: { eq: $slug } }) {
      frontmatter {
        featuredimage {
          childImageSharp {
            original {
              src
            }
          }
        }
      }
    }
  }
`

<Helmet
    meta={{
      property: `og:image`,
      content: `${siteUrlRoot}${post.frontmatter.featuredimage.childImageSharp.original.src}`
    }}
 />

如何将 FuturedImage 设置为 og: image.在 gatsby.js

How to set FuturedImage to og: image. in gatsby.js

reactjs

gatsby

react-helmet

gatsby-image