Closed Jeff-Tian closed 1 year ago
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
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.
"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
@tx0c sharp does not support Windows BMP files. These are completely unrelated to the PNG format.
but it's same BMP format as pointed in above https://github.com/lovell/sharp/issues/3509#issuecomment-1368198557
so can I file a feature request for Windows BMP files? if the browser can show it no problem, why cannot sharp process it?
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 https://github.com/gatsbyjs/gatsby/pull/37165.
The author of gatsby thinks if
sharp
thinks an image is corrupt, thengatsby
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
:The test output:
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 https://github.com/lovell/sharp/issues/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:
Please provide sample image(s) that help explain this question