Gatsby 不解析 GraphQL 图像地址

Question

我的项目基于gatsby-creative starter。 我正在尝试添加一个 Open Graph 图像元属性。 不幸的是，源文件夹中的图像地址没有被转换为正确的内容路径。 这是我所做的...

我首先向 siteMetaData 添加了“url”和“image”属性：

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

到目前为止，我正在做与在线文档相同的事情。 但是，这些说明有一条注释，指出上述“图像”属性包含Path to your image you placed in the 'static' folder的Path to your image you placed in the 'static' folder 。 嗯？ 我不相信我应该“在静态文件夹中放置一个图像”......我认为这是 Gatsby 的工作。 但是一路走...

从这个原始seo.js 文件开始，我向 graphQL 查询添加了相同的“url”和“image”属性：

  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 。

是的，在线文档与这种方法不同，但它似乎是等效的。 我不明白为什么地址没有被解析到应该找到图像的“静态”文件夹。

作为一种解决方法，我在 seo.js 文件中添加了以下内容：

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

当我将该socialBanner放入同一个“og:image”属性的“内容”中时，它会按预期工作并解析为： https://website.com/static/snape-119744a51329473845d08af3df4b5290.jpg 。

我不想要那个黑客。 我需要更改什么才能正确使用 Gatsby 工具（StaticQuery、Helmet 等）来处理此图像和地址？

Answer 1

Gatsby 文档引用的static文件夹位于项目的根目录下。 这是 static 文件夹的文档及其在 Gatsby 中的行为。

如果您想使用 SEO 示例文档中显示的方法，您需要将 OpenGraph 图像添加到此文件夹，而不是public/static ，这是 Gatsby 用于生成文件的文件夹。

在模块系统之外添加资产

您可以在项目的根目录下创建一个名为static的文件夹。 您放入该文件夹中的每个文件都将复制到公用文件夹中。 例如，如果您将名为sun.jpg的文件添加到静态文件夹，它将被复制到public/sun.jpg