Gatsby remark images部分图片加载失败问题求助

使用gatsby-transformer-remark构建静态网站，通过Markdown动态生成页面，每个页面文件夹包含index.md及若干PNG图片。部分图片可正常显示，但部分图片在开发控制台抛出以下错误：

Error: Input buffer contains unsupported image format

 ERROR #gatsby-transformer-remark_gatsby-plugin-sharp-20000

Failed to retrieve metadata from image

所有图片均为PNG格式，与引用它们的index.md在同一目录，且已正确复制到public/static目录，怀疑是插件配置问题但无法定位原因及失败规律，附上Gatsby配置代码：

const fs = require('fs')
const path = require('path')

const DIR = './src/data'
const folders = fs.readdirSync(DIR)

let config = {
  siteMetadata: {
    title: `mySite`,
    siteUrl: `https://www.yourdomain.tld`,
    authors: [
      { id: `bar`, name: `foo` }
    ],
    pages: []
  },
  plugins: [
    "gatsby-plugin-emotion",
    "gatsby-plugin-image",
    "gatsby-plugin-sitemap", {
      resolve: 'gatsby-plugin-manifest',
      options: {
        "icon": "src/images/icon.png"
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            // options: {
            //   wrapperStyle: `margin-bottom: 1.0725rem`,
            // },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
          `gatsby-remark-autolink-headers`
        ],
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        "name": "images",
        "path": "./src/images/"
      },
      __key: "images"
    },
  ],
};

folders.forEach(folder => {
  if(!folder.startsWith('_') && fs.statSync(path.join(DIR, folder)).isDirectory() && folder !== '.git' ){
    config.plugins.push({resolve: 'gatsby-source-filesystem', options: {name: folder.split('_')[1], path: path.join(DIR, folder)}})
    config.siteMetadata.pages.push(folder)
  }
})

module.exports = config

排查与解决方案 #

1. 验证图片文件的有效性 #

• 部分后缀为.png的文件可能实际格式错误或损坏，用图片编辑工具（如Photoshop、GIMP）重新导出报错图片，确保为标准PNG格式。
• 用命令行验证文件：Mac/Linux执行file your-image.png，查看输出是否包含PNG image data；Windows可右键文件查看属性，或用certutil -hashfile your-image.png确认文件完整性。

2. 调整插件加载顺序 #

Gatsby插件加载顺序会影响文件处理逻辑，需确保所有gatsby-source-filesystem配置在gatsby-transformer-remark之前加载。修改代码中动态添加source-filesystem的部分，将其插入到插件数组的头部：

folders.forEach(folder => {
  if(!folder.startsWith('_') && fs.statSync(path.join(DIR, folder)).isDirectory() && folder !== '.git' ){
    // 用unshift替代push，将source-filesystem放到插件数组最前面
    config.plugins.unshift({resolve: 'gatsby-source-filesystem', options: {name: folder.split('_')[1], path: path.join(DIR, folder)}})
    config.siteMetadata.pages.push(folder)
  }
})

3. 避免插件冲突 #

gatsby-remark-copy-linked-files与gatsby-remark-images可能存在处理冲突，前者会直接复制图片文件，后者需要解析图片元数据。可采取以下两种方式：

• 暂时注释掉gatsby-remark-copy-linked-files插件，测试是否解决报错。
• 若需保留该插件，配置其忽略图片格式：

{
  resolve: `gatsby-remark-copy-linked-files`,
  options: {
    ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
  },
}

4. 检查插件版本兼容性 #

确保gatsby-plugin-sharp和gatsby-transformer-sharp的版本与Gatsby主版本兼容。执行npm list gatsby-plugin-sharp gatsby-transformer-sharp查看版本，若版本不匹配，运行npm update gatsby-plugin-sharp gatsby-transformer-sharp更新到兼容版本。

内容的提问来源于stack exchange，提问作者Tyrannas