Как установить FuturedImage в og: image. в gatsby.js

Я использовал gatsby.js.

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

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

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

Мой код 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
            }
          }
        }
      }
    }
  }
`

Спасибо.


reactjs gatsby react-helmet gatsby-image
person Yuwaz    schedule 17.02.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете запросить путь к сгенерированному изображению (формат '/ 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}`
    }}
 />
person Qubis741    schedule 17.02.2020
comment
Спасибо за ваш ответ. Произошла следующая ошибка: -Неизвестное поле «оригинал» типа «Файл». Вы знаете официальную документацию для original.src? - person Yuwaz; 19.02.2020