реализация образа stati c og в Gatsby

Question

Я новичок в Гэтсби и не могу найти решение для этого: я развернул веб-сайт, который на данный момент является просто целевой страницей «скоро». Я сделал снимок экрана, который хочу использовать как og-изображение для всего ... Теперь он находится в src / images, но:

• , если я не импортирую его куда-либо, это не так будет доступен в папке publi c после сборки

• , если я импортирую его, он будет в папке stati c, но с уникальным ha sh, поэтому я m не может правильно установить метатег в файле SEO с помощью Helmet.

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:image`,
          content: 'https://example.com/{how to get to the url of my image???}',
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
  

  }

Answer 1

Вы попали в точку, способ добиться того, чего вы хотите, - это добавить его в свою /static папку, поскольку вы не импортируете его как компонент, поэтому способ сделать изображение доступным - это.

1004 * изображения - это имя самого изображения с той же внутренней структурой папок. Как вы можете видеть в документации Gatsby о stati c folder :

Вы можете создать папку с именем stati c в root вашего проекта. Каждый файл, который вы помещаете в эту папку, будет скопирован в общую папку. Например, если вы добавите файл с именем sun.jpg в папку stati c, он будет скопирован в public/sun.jpg

В предыдущем случае sun.jpg должен быть только одним уровнем внутри /static. Если вы добавите еще один уровень, например /images/sun.jpg, ваш publi c URL будет https://example.com/images/sun.jpg.

Итак, в вашем случае:

  {
    property: `og:image`,
    content: 'https://example.com/path_to_your_static_image.extension',
  },

Примечание. : имейте в виду, что будучи publi c URL, он не будет работать, пока вы не развернете приложение, а образ не останется publi c