Как установить FuturedImage для og: image. в Гэтсби. js - PullRequest
Новая
       40

Как установить FuturedImage для og: image. в Гэтсби. js

0 голосов
/ 17 февраля 2020

Я использую gatsby. js.

Я хочу установить характеристику изображения, описанную в уценке, в атрибуте og: image метатега, но он не работает.

FeatureDmage оптимизирован для разных путей с помощью Gatsby, но относительный путь устанавливается как физический путь перед сборкой.

Как установить путь для FeatureDmage, созданного сборкой?

My React Код шлема (выдержка): 

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

Спасибо.

1 Ответ

1 голос
/ 17 февраля 2020

Вы можете запросить путь к сгенерированному изображению (формат '/ static / name') и использовать его с сайтом root 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}`
    }}
 />
...