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

【问题标题】：Gatsby build always throwing Input file is missing or of an unsupported image formatGatsby build 总是抛出 Input file is missing or of an unsupported image format
【发布时间】：2018-11-11 05:39:56
【问题描述】：

问题的完整描述可以在这里找到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

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

要复制，请分叉此存储库https://github.com/swashata/swas.io 并运行yarn build。错误日志也可以在这里找到https://app.netlify.com/sites/optimistic-perlman-163196/deploys/5b10e5cdb3127429bf8a5d5d

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

为每一个frontmatter添加featured_image。
从 graphql 中删除 features_image 查询。
移除 gatsby-remark-images 插件。

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

非常感谢您在查找问题方面的任何帮助。

【问题讨论】：

标签： gatsby

【解决方案1】：

只需将其添加到您的 package.json 中

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

【讨论】：

【解决方案2】：

对我来说，我有正确的图像，此问题已通过以下方式解决：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：

感谢您提供所有这些信息！帮了我很多！