0

我在我的博客中使用 GatsbyJS，源代码在 GitHub 中，托管在 Netlify 中。整个东西都是开源的，所以如果有帮助你可以在这里查看。

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

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

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

在此处输入图像描述

此页面的当前链接

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

提前致谢！

4

1 回答 1

1

在您的blog-list.js组件 (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`,
            ],
          },
        },
    
      ],
    }

为了转换所有与降价相关的路径。

其他注意事项

图像在那里。即使它们没有出现在给定的帖子中，您也可以手动访问它们。但出于某种原因，盖茨比没有表现出来。

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

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

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

于 2021-01-27T16:15:57.470 回答