为什么 Gatsby-JS 会随机丢失特色图片？

Question

我的博客使用 GatsbyJS，源代码在 GitHub，托管在 Netlify。整个东西都是开源的，所以你可以check it out here if it helps。

我已经使用 GatsbyJS 快一年了，这个问题一直存在。随机地，帖子的featuredimage 会消失。一个部署就在那里。接下来就没了。我没有找到任何原因或原因，并且 Netlify 构建日志中没有任何内容表明问题可能是什么。

知道为什么对于不变的内容会改变吗？图像在那里。即使它们没有出现在给定的帖子中，您也可以手动访问它们。但出于某种原因，盖茨比没有展示它。

这是我的主博客页面的屏幕截图。这些列出的每一篇文章都有一个特色图片。但一半没有出现：

Current link to this page

我不确定是否应该在此处包含我的 package.json 或 gatsby-config.js。它们在我共享的存储库中，但如果我应该将它们粘贴到这个问题中，我可以。

提前致谢！

Answer 1

在你的blog-list.js component (line54):

<header>
  {node.frontmatter.featuredimage ? (
    <div className="featured-thumbnail">
      <PreviewCompatibleImage
        imageInfo={{
          image: node.frontmatter.featuredimage,
          alt: `featured image thumbnail for post ${title}`,
        }}
      />
    </div>
  ) : null}
</header>

条件 (node.frontmatter.featuredimage) 未被验证为 true，它返回一个空标签：

您应该能够在本地重现相同的行为，构建和服务您的项目。图片好像上传不正确

如果适用，我会尝试查看并进行 PR，但您需要修复所有阻止编译的错误。由于与图像相关的所有错误，代码尚未准备好发布。

尝试添加gatsby-plugin-netlify-cms-paths 插件作为gatsby-transformer-remark plugin 的选项，并在其外部添加：

module.exports = {
  plugins: [

        `gatsby-plugin-netlify-cms-paths`,
                {
          resolve: `gatsby-transformer-remark`,
          options: {
            plugins: [
              `gatsby-plugin-netlify-cms-paths`,
            ],
          },
        },
    
      ],
    }

为了转换所有markdown相关的路径。

---

其他注意事项

图像在那里。您可以手动访问它们，即使它们 不要出现在给定的帖子中。但出于某种原因，盖茨比不是 显示它。

当然，您正在使用以下方式复制它们：

  {
    resolve: 'gatsby-remark-copy-linked-files',
    options: {
      destinationDir: 'static',
    },
  },

这会将所有markdown引用的资产复制到静态文件夹中，在构建时，静态文件夹将被转换为具有相同内部结构的/public文件夹，因此您的图像将在那里，但您的markdown文件可能仍然存在引用错误或路径构造错误。