Question

我是Gatsby的新手，因此无法找到解决方案：我现在部署了一个网站，该网站只是一个“即将推出”的着陆页。我拍了一张截图，我想将其用作所有图片的og-image ... 它现在位于src / images中，但是：

如果我没有将其导入到任何地方，则构建后将无法在公用文件夹中使用

如果我将其导入，它位于静态文件夹中，但具有唯一的哈希，因此我无法使用头盔在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，它只有在部署应用程序并且图像保持公开状态后才能起作用

在盖茨比实现静态og图像

1 个答案: