在 Gatsby 中实现静态 og 图像

Question

我是 Gatsby 的新手，找不到解决方案： 我部署了一个网站，它现在只是一个“即将推出”的登陆页面。 我截取了一个屏幕截图，我想将其用作所有内容的 og-image... 它现在位于 src/images 但是：

• 如果我不在任何地方导入它，构建后它就不会在公共文件夹中可用

• 如果我导入它，它在静态文件夹中但具有唯一的哈希，因此我无法使用 Helmet 在 SEO 文件中正确设置元标记。

  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文件夹中，因为你没有将它作为组件导入，所以使图像可用的方法是这样的。

图片的URL是图片本身的名字，内部文件夹结构相同。正如您在Gatsby documentation about static folder 中看到的：

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

在前一种情况下，sun.jpg 必须只是/static 内的一层。如果您添加其他级别，例如/images/sun.jpg，您的公开URL 将是https://example.com/images/sun.jpg。

所以，在你的情况下：

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

注意：请记住，作为公开的 URL，在您部署应用并且图像保持公开之前，它不会起作用