Twitter卡片图像不适用于Gatsby应用程序

我正在使用 Netlify CMS（并托管在 Netlify 上）开发 Gatsby 应用程序。尝试使元数据正常工作，以便 Twitter 卡片与图像一起正确显示。

元数据通常没问题，但图像没有显示在 Twitter 验证器上，或者如果我尝试发布到 Twitter。问题显然是图像本身，这些图像托管在网站上，使用 Gatsby 和 Gatsby Image Sharp 进行渲染。

事实上，验证器似乎没有显示出根本问题。简单地说，图像不显示：

相关元数据示例：

<meta name="twitter:url" content="https://example.com/">
<meta name="twitter:image" content="https://example.com/static/12345/c5b20/blah.jpg">
<meta name="twitter:title" content="Site title">
<meta name="twitter:card" content="summary_large_image">

我知道图像的问题，因为如果我用外部 URL 替换我的图像 URL（这是完整的图像 URL），它工作正常，显示带有图像的完整卡片。

知道是什么原因造成的吗？我正在缩小图像的大小，以便它可以快速加载，而且它似乎可以直接加载（例如）。（我的意思是，那张图片有什么奇怪的地方吗？）

注意：在此问题的先前版本中，我引用了 Cloudinary 和 Uploadcare，但此后在一个分支中删除了这两个以简化问题。（他们似乎已经从我使用的起始应用不必要的遗物。）现在，您可以看到一个示例页面该分支在这里和相关图像中的twitter:image标签在这里。我使用 React Helmet（和 Gatsby React Helmet）将此预处理/缩小的图像提供到标题中，并在我的 GraphQL 调用中使用以下代码以该特定的较小格式获取与博客文章关联的图像：

    featuredimage {
      childImageSharp {
        fixed(width: 480, quality: 75) {
          src
        }
    }

第二个注意事项/想法：我是否应该担心生产中的页面似乎在每次重新加载时都重新渲染？SSR 不应该确保不会发生这种情况吗？我通过Math.random()在页面中包含对, hidden的调用来测试这一点。您可以通过运行查看结果document.getElementsByClassName('document')[0].children[0].innerText，并注意它在每个页面重新加载时产生不同的数字。这对我来说意味着整个页面正在由客户端重新呈现。是不是错了？为什么会发生这种情况？这可能与客户端对每个请求的图像进行某种处理有关，这可能会搞砸 Twitter 卡片？

第三次更新：我在这里整理了一个更简单的复制品。它基于此入门模板，删除了 Uploadcare/Cloudinary 并将 Twitter 卡片元数据添加到标题中。除此之外，并删除了不必要的页面，我没有做任何其他更改。我将这个 starter 用于 repro 而不是 vanilla starter 应用程序，因为我不确定问题是否是由 Netlify CMS 和 Gatsby Sharp Image 插件的交互引起的。我可能会尝试制作第二个复制品。现在，这个 repo 的代码在这里，应该显示 Twitter 卡片的页面是博客文章，比如这个。

ACTUALLY，似乎一个超级基本再现，与盖茨比3，没有Netlify CMS或任何东西，有同样的问题。这是最小的复制，src/images使用allImageSharp查询获取的图像并插入到每个页面的元数据中。代码在这里。

最后更新

根据下面德里克的回答，我删除了@reach/router这些内容，并从 Netlify 构建环境变量中获取了站点 URL。似乎@reach/router只有在 JS 运行时才提供此信息，其中排除了 Twitterbot，从而产生了一个undefined基本 URL，从而破坏了 Twitter 图像。包括来自 Netlify 的 URL（process.env.URL在 Gatsby 配置中使用并通过 siteMetadata 查询拉入）修复了问题！