为什么 Gatsby-JS 会随机丢失精选图片？

问题描述

我的博客使用 GatsbyJS，源在 GitHub，托管在 Netlify。整个过程都是开源的，因此您可以check it out here if it helps。

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

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

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

Current link to this page

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

提前致谢！

解决方法

在您的 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 引用的资源复制到 static 文件夹中，在构建时，static 文件夹将被转换为具有相同内部结构的 /public 文件夹，因此，您的图像将在那里，但您的 Markdown 文件可能仍然引用错误或路径构造错误。