GitHub操作失败，出现Gatsby错误：输入文件包含不支持的图像格式

我将Gatsby和NetlifyCMS用于我的网站，目前在GitHub Actions中运行工作流时收到以下错误消息：

error "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:

Error: Input file contains unsupported image format

非常奇怪的是，在我的本地系统上，gatsby develop和gatsby build没有出现错误

我的插件阵列如下所示：

plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/static/img`,
        name: "uploads",
      },
    },
    `gatsby-plugin-smoothscroll`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-twitter`,
    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        htmlFavicon: `src/images/favicon.png`,
      },
    },
    `gatsby-plugin-no-index`,
    `gatsby-plugin-transition-link`,
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/postings`,
        name: "postings",
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /svg/,
        },
      },
    },
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-relative-images",
            options: {
              name: "uploads",
            },
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              staticFolderName: "static",
              maxWidth: 768,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        // Available options and their defaults:
        base64Width: 20,
        forceBase64Format: `jpg`, // valid formats: png,jpg,webp
        useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
        stripMetadata: true,
        defaultQuality: 50,
        failOnError: true,
      },
    },
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
      },
    },
  ],

这是我的查询，我用childImageSharp访问缩略图

const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark(
        filter: { frontmatter: { templateKey: { eq: "blog" } } }
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
              language
              templateKey
              description
              author
              thumbnail {
                childImageSharp {
                  fluid(maxWidth: 240, maxHeight: 140, quality: 100) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
    }
  `);

我不知道这是什么原因。我已经尝试更新了几个软件包

这是我的package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "@brainhubeu/react-carousel": "^1.19.26",
    "@tailwindcss/ui": "^0.6.2",
    "axios": "^0.21.0",
    "formik": "^2.2.3",
    "gatsby": "2.28.00",
    "gatsby-image": "^2.4.17",
    "gatsby-plugin-manifest": "^2.7.0",
    "gatsby-plugin-matomo": "^0.8.3",
    "gatsby-plugin-netlify-cms": "^4.4.0",
    "gatsby-plugin-no-index": "^1.0.1",
    "gatsby-plugin-offline": "^3.2.27",
    "gatsby-plugin-postcss": "^2.3.12",
    "gatsby-plugin-react-helmet": "^3.3.14",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sharp": "^2.10.0",
    "gatsby-plugin-smoothscroll": "^1.2.0",
    "gatsby-plugin-transition-link": "^1.20.5",
    "gatsby-plugin-twitter": "^2.4.0",
    "gatsby-plugin-typography": "^2.5.11",
    "gatsby-remark-images": "^3.7.0",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-filesystem": "^2.3.28",
    "gatsby-transformer-remark": "^2.11.0",
    "gatsby-transformer-sharp": "^2.5.14",
    "i18next": "^19.8.3",
    "lodash": "^4.17.20",
    "netlify-cms-app": "^2.13.3",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "react-i18next": "^11.7.3",
    "react-media": "^2.0.0-rc.1",
    "react-particles-js": "^3.3.0",
    "react-select": "^3.1.1",
    "react-slick": "^0.27.12",
    "react-spring": "^8.0.27",
    "react-transition-group": "1.x",
    "react-typography": "^0.16.19",
    "sharp": "^0.26.3",
    "slick-carousel": "^1.8.1",
    "tsparticles": "^1.18.2",
    "typography": "^0.16.19",
    "yup": "^0.29.3"
  },
  "devDependencies": {
    "env-cmd": "^10.1.0",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.17",
    "prettier": "2.1.1",
    "tailwindcss": "^1.8.10"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "env-cmd -f .env.local gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

{
“名称”：“盖茨比起动器默认值”，
“私人”：没错，
“描述”：“与盖茨比一起迅速崛起和发展的简单开端”，
“版本”：“0.1.0”，
“作者”：“凯尔·马修斯”，
“依赖项”：{
“@brainhubeu/react carousel”：“^1.19.26”，
“@tailwindcss/ui”：“^0.6.2”，
“axios”：“^0.21.0”，
“formik”：“^2.2.3”，
“盖茨比”：“2.28.00”，
“盖茨比形象”：“^2.4.17”，
“盖茨比插件清单”：“^2.7.0”，
“盖茨比外挂插件matomo”：“^0.8.3”，
“盖茨比插件netlify cms”：“^4.4.0”，
“盖茨比插件无索引”：“^1.0.1”，
“盖茨比插件离线”：“^3.2.27”，
“盖茨比邮政编码”：“^2.3.12”，
“盖茨比头盔”：“^3.3.14”，
“盖茨比插件反应svg”：“^3.0.0”，
“盖茨比夏普插件”：“^2.10.0”，
“盖茨比插件平滑滚动”：“^1.2.0”，
“盖茨比插件转换链接”：“^1.20.5”，
“盖茨比插件推特”：“^2.4.0”，
“盖茨比插件排版”：“^2.5.11”，
“盖茨比评论图片”：“^3.7.0”，
“盖茨比评论相关图片”：“^2.0.2”，
“盖茨比源文件系统”：“^2.3.28”，
“盖茨比变压器备注”：“^2.11.0”，
“盖茨比变形金刚”：“^2.5.14”，
“i18next”：“^19.8.3”，
“lodash”：“^4.17.20”，
“netlify cms应用程序”：“^2.13.3”，
“道具类型”：“^15.7.2”，
“反应”：“^16.12.0”，
“react dom”：“^16.12.0”，
“反应头盔”：“^6.1.0”，
“react-I18下一步”：“^11.7.3”，
“反应介质”：“^2.0.0-rc.1”，
“反应粒子js”：“^3.3.0”，
“反应选择”：“^3.1.1”，
“反应平滑”：“^0.27.12”，
“反应弹簧”：“^8.0.27”，
“反应过渡组”：“1.x”，
“反应排版”：“^0.16.19”，
“夏普”：“^0.26.3”，
“光滑转盘”：“^1.8.1”，
“TSP粒子”：“^1.18.2”，
“排版”：“^0.16.19”，
“是”：“^0.29.3”
},
“依赖性”：{
“环境指令”：“^10.1.0”，
“gatsby-plugin-webpack-bundle-analyzer-v2”：“^1.1.17”，
“更漂亮”：“2.1.1”，
“tailwindcss”：“^1.8.10”
},
“关键词”：[
“盖茨比”
],
“许可证”：“0BSD”，
“脚本”：{
“建造”：“盖茨比建造”，
“开发”：“环境指令-f.env.local盖茨比开发”，
“格式”：“prettier--write\”***.{js，jsx，ts，tsx，json，md}\”，
“开始”：“npm运行开发”，
“发球”：“盖茨比发球”，
“干净”：“盖茨比干净”，
“测试”：“echo\”写测试！->https://gatsby.dev/unit-testing\“&&退出1”
},
“存储库”：{
“类型”：“git”，
“url”：”https://github.com/gatsbyjs/gatsby-starter-default"
},
“臭虫”：{
“url”：”https://github.com/gatsbyjs/gatsby/issues"
}
}

问题似乎与favicon路径有关，请确保路径正确，并尝试将其更改为其他虚拟图像

如果路径正确（

@babel/helper编译目标

），或者根据它，也可能是由于

libvips

依赖项的无效版本造成的。在这两种情况下，您可以尝试相同的解决方案：

删除锁文件（

package lock.json

或

warn lock.json

）和

node\u modules

文件夹，并使用

warn install

或

npm install

重新安装依赖项。如果问题仍然存在，请尝试：

rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn

---

你的

src/images/favicon.png是否存在？@FerranBuireu我再次检查了路径。路径是正确的，并且映像以这种形式存在。由于错误消息只在生成过程中出现，很遗憾，这没有帮助。package.json文件将保持不变，构建过程将再次报告错误。对我来说，这仍然适用于盖茨比开发和建设。发生这种错误的原因真的很奇怪。我已经删除了所有的博客文章，并检查了图片的路径是否正确。当然，我猜问题在于节点的版本不匹配，或者本地和Netlify之间的任何特定依赖关系。这就是为什么我试图在本地升级它们，以便在本地重现问题。构建过程需要安装的依赖项来工作和做一些事情，所以这是我的猜测。尝试在本地和Netlify之间检查节点的版本。当地正在建设的事实不应被视为绝对真理。它是在您的条件下构建的，而不是在Netlify的环境中，这就是为什么我要指出这个方向。谢谢您的提示！我将检查本地和Netlifys one之间的节点版本。然而，我现在已经设法使构建过程正常工作。我已经注释掉了gatsby-config.js中的插件gatsby插件清单。现在构建过程开始工作了。这取决于盖茨比插件清单。它可能没有正确配置，因为代码仍然来自初学者模板。是的，当然，我的第一个猜测是
gatsby插件清单的路径是错误的，因为错误指出了这一点，但是，它似乎无法获得favicon，但您说它正在工作，通过阅读一些文章，我改变了方向。尝试将图像更改为另一个虚拟图像。用新图像替换旧的favicon.png（&new name）确实有效；）