Gatsby build 总是抛出 Input file is missing or an unsupported image format

Swa*_*osh 5 gatsby

问题的完整描述可以在这里找到https://github.com/gatsbyjs/gatsby/issues/5638

简而言之,我正在使用gatsby-plugin-remarkgatsby-transformer-remark优化放置在 md 文件前端的图像。

说我的降价文件有

---
title: Beautiful UI
featured_image: ../../images/project-vscbui.png
subtitle: A set of color themes for VSCode
order: 90
link: https://vscbui.rocks
templateKey: projects
---

...
Run Code Online (Sandbox Code Playgroud)

我像这样查询

export const projectQuery = graphql`
  query ProjectQuery {
    projects: allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___order] }
      filter: { frontmatter: { templateKey: { eq: "projects" } } }
      limit: 1000
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            subtitle
            featured_image {
              childImageSharp {
                sizes(maxWidth: 960) {
                  ...GatsbyImageSharpSizes
                }
              }
            }
            link
          }
          html
        }
      }
    }
    site {
      siteMetadata {
        shortTitle
      }
    }
  }
`;
Run Code Online (Sandbox Code Playgroud)

gatsby develop工作得很好。但是当我运行时gatsby build,它无法给出错误

success Building static HTML for pages — 3.818 s
error Input file is missing or of an unsupported image format


  Error: Input file is missing or of an unsupported image format

error UNHANDLED REJECTION


  Error: Input file is missing or of an unsupported image format
Run Code Online (Sandbox Code Playgroud)

虽然构建实际上工作得很好

要重现,请 fork 这个存储库https://github.com/swashata/swas.io并运行yarn build。错误日志也可以在这里找到https://app.netlify.com/sites/optimistic-perlman-163196/deploys/5b10e5cdb3127429bf8a5d5d

我已经尝试了所有方法来解决这个问题

  1. 将 features_image 添加到每个 frontmatter。
  2. 从 graphql 中删除 features_image 查询。
  3. 删除 gatsby-remark-images 插件。

但似乎没有任何效果,除了实际删除图像和锐利的插件。

非常感谢找到问题的任何帮助。

Swa*_*osh 7

事实证明,我实际上丢失了一个图像文件。

我正在使用gatsby-plugin-manifest并且我放置在那里的图像路径是 src/img/ninja.png,但它应该是src/images/ninja.png. 我之前更改了目录名称,完全忘记为配置文件重构它。我已经更正了,它工作得很好。

所以底线是,当这个错误发生时

  1. 查找所有图像文件。特别是在gatsby-config.js文件中。
  2. 检查输出目录,看看它是否真的包含“锐化”的图像。

我采用的调试路径是在 markdown 文件中一一禁用图像。但由于它没有解决问题,我开始寻找其他地方,然后引起gatsby-config.js了注意。完全是我的错。