盖茨比评论图像，有些图像失败但其他图像失败

Question

我对这个有点疯狂，我已经（我认为）到处查看 github 问题和堆栈溢出，但找不到解决我问题的任何方法：

所以我一直在构建一个带有 gatsby transformer remark 的小型网站，以基于降价动态创建页面。

我为每个页面都有一个文件夹，其中包含一个 index.md 以及一个或多个图像。 一些图像工作正常并显示在生成的页面中，但有些图像不工作并在开发控制台中引发以下错误：

Error: Input buffer contains unsupported image format


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

Failed to retrieve metadata from image

现在奇怪的事情是：

• 所有图像都是相同的格式“.png”
• 所有图像都在与引用它们的 index.md 相同的目录中
• 所有图像都正确复制在公共/静态目录中

我猜我一定是我的一个插件做错了，但我不知道为什么，也找不到为什么有些图像失败而有些没有的逻辑。

这是我的 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

非常感谢

Answer 1

事实上，自从我的图像现在显示以来，以下“有效”，但这是一个 hack 而不是真正的解决方案：

{
    resolve: `gatsby-remark-copy-linked-files`,
    options: 
    {
      ignoreFileExtensions: []
    }
},

更新

这是由于有些图片在 Mac 上推送，有些在 Windows 上推送。 git 添加的 LF/CRLF 使插件无法读取图像（尽管它们在我的文件资源管理器中仍然完全可读）。

我按照这个答案解决了问题