Gatsby 构建总是抛出 Input file is missing or of an unsupported image format

Question

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

简而言之，我正在使用 gatsby-plugin-remark 和 gatsby-transformer-remark 来优化放置在 md 文件的 frontmatter 中的图像。

假设我的降价文件有

---
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
---

...

而且我查询它喜欢

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
      }
    }
  }
`;

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

尽管 build 实际上工作得很好。

要复制，请 fork 这个存储库 https://github.com/swashata/swas.io and run yarn build. An error log can also be found here https://app.netlify.com/sites/optimistic-perlman-163196/deploys/5b10e5cdb3127429bf8a5d5d

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

将 featured_image 添加到每个 frontmatter。
从 graphql 中删除 featured_image 查询。
删除 gatsby-remark-images 插件。

但似乎没有任何效果，除了实际删除图像和 sharp 插件。

非常感谢任何有助于发现问题的帮助。

Answer 1

原来我确实丢失了一个图像文件。

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

所以最重要的是，当这个错误发生时

查找所有图像文件。特别是在 gatsby-config.js 文件中。
检查输出目录，看看它是否确实包含 "sharp"ed 图像。

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

Answer 2

对我来说，我的图像是正确的，这个问题是通过以下方式解决的：

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

来源：https://github.com/gatsbyjs/gatsby/issues/21515#issuecomment-588416624

Answer 3

只需将此添加到您的 package.json

“决议”：{ “锐利”：“0.24.0” },

Gatsby 构建总是抛出 Input file is missing or of an unsupported image format

Gatsby build always throwing Input file is missing or of an unsupported image format

gatsby