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

Question

I using gatsby.js.

I want to set the featuredimage described in markdown in the og: image attribute of the meta tag, but it does not work.

The featuredimage is optimized for different paths by gatsby, but the relative path is set to the physical path before build.

How do I set the path for the featuredimage created by the build?

My React Helmet code (excerpt):

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

My GraphQL query:

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
            }
          }
        }
      }
    }
  }
`

Thanks.

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}`
    }}
 />