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

Question

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

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

知道为什么对于未更改的内容这会发生变化吗？图像在那里。即使它们没有出现在给定的 post 中，您也可以手动访问它们。但出于某种原因，Gatsby 没有显示它。

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

Current link to this page

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

提前致谢！

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相关的路径

其他注意事项

The images are there. You can manually access them even when they don't appear with a given post. But for some reason Gatsby's not showing it.

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

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

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

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

Why does Gatsby-JS randomly lose featuredimage images?

javascript

gatsby

gatsby-image

gatsby-remark-image

其他注意事项