Gatsby remark images, some images are failing but not others

Question

I'm getting a bit crazy about this one, I've looked (I think) everywhere on github issues and stack overflow but cannot find any solution to my problem:

So I've been building a small website with gatsby transformer remark to create pages dynamically based on markdowns.

I have a folder for each page, containing an index.md and eventually one or more images. Some images work fine and are displayed in the the generated pages, but some are not and raise the following error in the dev console:

Error: Input buffer contains unsupported image format


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

Failed to retrieve metadata from image

Now the weird things are:

• all images are the same format ".png"
• all images are in the same directory than the index.md referencing them
• all images are copied properly in the public/static directory

I guess that I must be doing something wrong with one of my plugins but I cannot figure why, nor find a logic of why some images fail and some don't.

Here is my gatsby config in case that might help:

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

Thank you very much

Answer 1

As a matter of fact, the following "worked" since my images are displayed now, but it's a hack and not a real solution:

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

Update

It was due to some images being pushed on a Mac, and some on a windows. The LF/ CRLF added by git was making the images unreadable by the plugin (although they were still perfectly readable in my file explorer).

I followed this answer tp solve the issue