Gatsby 无法解析 GraphQL 图像地址

Question

我的项目基于gatsby-creative 启动器。我正在尝试添加一个 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`
  },

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

从这个原始的 seo.js file 开始，我在 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。

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

作为一种变通方法，我在 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 文件夹位于项目的根目录中。 Here's the documentation for the static folder and it's behavior in Gatsby.

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

在模块系统之外添加资产

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