Yet another "Input file contains unsupported image format" question

[Jeff-Tian]

Question about an existing feature

My gatsby site building fails due to this error: "Input file contains unsupported image format". By troubleshooting, I found it's related to the png images on my site. These png images are generated by a famous company WeChat and I can NOT change the generating process.

I tried to let the gatsby building process ignore the error and continue, but failed, see gatsbyjs/gatsby#37165.

The author of gatsby thinks if sharp thinks an image is corrupt, then gatsby will respect and throw and so stops building.

But from a normal person's point of view, the images are looking good. I'll paste a typical image that will fail the building process here:

So may I ask for your kind advice on how to fix this issue? It's apparently my issue, but I failed to fix it for a long time.

What is the root cause that makes the sharp think it's corrupted?

To reproduce the error, I put the image to the sharp, and called .metadata:

  it('PNG tests', function (done) {
    sharp(fixtures.inputPngMp).metadata(function (err, metadata) {
      if (err) throw err;
      assert.strictEqual('png', metadata.format);
      done();
    });
  });

The test output:

  Image metadata
    1) PNG tests


  0 passing (11ms)
  1 failing

  1) Image metadata
       PNG tests:
     Uncaught Error: Input file contains unsupported image format

What are you trying to achieve?

I want to know why metadata fails when processing the image, and what's the best way to make it NOT throw?

Tried with failOn: 'none', but it doesn't work. See #3480.

When you searched for similar issues, what did you find that might be related?

Didn't find the specific case.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question

See above:

  it('PNG tests', function (done) {
    sharp(fixtures.inputPngMp).metadata(function (err, metadata) {
      if (err) throw err;
      assert.strictEqual('png', metadata.format);
      done();
    });
  });

Please provide sample image(s) that help explain this question

[lovell]

Hi, this looks like a Windows bitmap (BMP) file.

$ curl -s https://raw.githubusercontent.com/Jeff-Tian/gatsby-js/26158879194071fb652efb0f9659edd6ab553d70/packages/gatsby-plugin-sharp/src/__tests__/images/metadata-error.png | file -
/dev/stdin: PC bitmap, Windows 98/2000 and newer format, 1710 x 624 x 32, cbSize 4268298, bits offset 138

[Jeff-Tian]

Thanks @lovell !

So the root cause is the file extension isn't correct. I'll try to detect this scenario in some gatsby plugins then.

[tx0c]

"sharp": "^0.32.6" seems still have this issue:

Chrome browser is loading this sample image no problem:

the file extension isn't correct shouldn't the root cause,
because the JS code is not loading from local file, but a stream of arrayBuffer instead, it's not using mimetype nor file extension:

const res = await fetch(`https://assets.matters.news/embed/c16b9dbe-9d9f-4893-9b8b-f22f2656b479.png`);
const image = sharp(await res.arrayBuffer(), { animated: false, failOn: "none" });
const metadata = await image.metadata();

// then outer try catch got ERROR: [Error: Input buffer contains unsupported image format]

and it seems also PC bitmap format:

$ wget 'https://assets.matters.news/embed/c16b9dbe-9d9f-4893-9b8b-f22f2656b479.png'
$ file ./tmp/c16b9dbe-9d9f-4893-9b8b-f22f2656b479.png
./tmp/c16b9dbe-9d9f-4893-9b8b-f22f2656b479.png: PC bitmap, Windows 3.x format, 1280 x 720 x 24, resolution 3780 x 3780 px/m, cbSize 2764854, bits offset 54

[lovell]

@tx0c sharp does not support Windows BMP files. These are completely unrelated to the PNG format.

[tx0c]

but it's same BMP format as pointed in above #3509 (comment)

so can I file a feature request for Windows BMP files? if the browser can show it no problem, why cannot sharp process it?