Гэтсби не разрешает адрес изображения GraphQL

Question

Мой проект основан на gatsby-creative стартере. Я пытаюсь добавить мета-свойство Open Graph image. К сожалению, адрес изображения в исходной папке не переводится в правильный путь к содержимому. Вот что я сделал ...

Я начал с добавления свойств "url" и "image" к siteMetaData:

  siteMetadata: {
    title: `A Web Site`,
    description: `Yes, this is a web site.`,
    author: `Brent Arias`,
    url: `https://website.com`,
    image: `/images/snape.jpg`
  },

Пока я делаю то же самое, что и электронная документация . Однако в этих инструкциях есть комментарий, в котором говорится, что указанное выше свойство image содержит Path to your image you placed in the 'static' folder. А? Я не верю, что я должен "поместить изображение в папку stati c" ... Я думаю, что это работа Гэтсби. Но двигаясь дальше ...

Начиная с этого оригинального seo. js file , я добавил те же свойства "url" и "image" в запрос graphQL:

  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            url
            image
          }
        }
      }
    `
  )

Похоже, пока все хорошо. Наконец, в том же файле seo. js я добавил запись для самого изображения:

        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: `og:url`,
          content: site.siteMetadata.url,
        },
        {
          property: `og:image`,
          content: `${site.siteMetadata.url}${site.siteMetadata.image}`
        },

Когда страница отображается, метатег содержит бесполезный адрес https://website.com/images/snape.jpg.

Да, онлайн-документация не идентична этому подходу, но, похоже, является эквивалентом. Я не понимаю, почему адрес не разрешается в папку «stati c», в которой должно быть найдено изображение.

В качестве обходного решения вместо этого я добавил в SEO. js подайте следующее:

import socialBanner from '../images/snape.jpg'

Когда я помещаю socialBanner в "content" того же свойства "og: image", тогда он работает как положено и разрешается to: https://website.com/static/snape-119744a51329473845d08af3df4b5290.jpg.

Я не хочу этого хака. Что мне нужно изменить, чтобы правильно использовать инструменты Gatsby (StaticQuery, Helmet, et c) для обработки этого изображения и адреса?

Answer 1

Папка static, на которую ссылается документация Gatsby, находится в root вашего проекта. Вот документация для папки stati c и ее поведение в Gatsby .

Если вы хотите использовать подход, показанный в документации примера SEO, вам необходимо добавить свой OpenGraph изображение в эту папку, , а не до public/static, которая является папкой, которую Гэтсби использует для создаваемых файлов.

Добавление ресурсов вне системы модулей

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