vercel
@vercel/og and next/og: Can't load image: Unsupported image type: unknown
Bug report
Description / Observed Behavior
issue both with @vercel/og and next/og with an tag.
I want to render an image from public/backgrounds/1.png, so i do:
<img src={ new URL('/backgrounds/1.png', origin).toString() } {...rest} />.
in dev mode everything works as expected, but in production build there is an error:
"Can't load image http://0.0.0.0:3000/backgrounds/1.png: Unsupported image type: unknown."
In the browser link correctly opens with an image.
Expected Behavior
Proper render
Reproduction
https://og-playground.vercel.app/?share=XZFRT4MwEMe_CjmjvhBBXcwkQzO3RWfCnvbgw16AttBZeoS2AiP77rbDmehD07vf_669_G-AHAmFCGaEf-2k5yndCxoPg4s9r6S8KHXkXd-G4eW1P8KWE13-Y4SrWqS9pUzQ7kxdvOQNzTVHabUchankWU0FL-Ra00o5iUpNm7O0N0pz1i_QQun-_ytnaf5ZNGgkWaDAxuoXjLFRPR538skFM14VY7lq8njYQal1raIgMNLNqsqbHKugLlGjCoyZqIVZqbt8HRBspcCUPPOOkzi5b7tkP79ny5dp8tGV2Ws3TbbvU_bW2dP29nSbwyrcHJJus00ObH7FsMlprBtDr9r4YRLuwM7061w8WPQDRn_j4fFhJIGdfBbYVdgbfMDaGacgGuDUCtE0DH0YuyCauITQzBQQsVQo6gOtcM-3fe1WqttTZt9h1sdVlVECkZvq6INOM1tRUiGwxUYQOH4D
Additional Context
i've got output: "standalone" in next config
next: 14.2.3 @vercel/og: 0.6.2
I have the same problem everything works locally when accessing the route but when I deploy I have the same error message for two images I have to render.
<img src="https://mydomain.com/image.png" height={200} width={200}/>.
Hi, I am having the same issue on my hosted environment, but it works fine locally. Please help
My issue was fixed, there were couple of things
- You need an https endpoint to load the image
- The image should be publicly accesable and should not be corrupted.
After fixing these two things issue was automatically fixed.
@minkesh-pidilite I have ensured the availability of https endpoint for loading the image, it is publicly accessible as well. But how did you make sure that the image is not corrupted. In my case the image is properly loading in browser
In one the case the extension of the image was causing problems. Can you please post code snippet.
I don't think I will able top to post the code snippet here. But I can guarantee you that the extension is not the issue. I have tried it with all possible extensions ( jpg, jpeg, png) and not webp because satori doesn't have support for that format yet.
Another thing to make sure is file size is not too large. Because of that also this this issue comes up.
On Fri, Oct 25, 2024, 15:38 Jishnu @.***> wrote:
I don't think I will able top to post the code snippet here. But I can guarantee you that the extension is not the issue. I have tried it with all possible extensions ( jpg, jpeg, png) and not webp because satori doesn't have support for that format yet.
— Reply to this email directly, view it on GitHub https://github.com/vercel/satori/issues/613#issuecomment-2437399360, or unsubscribe https://github.com/notifications/unsubscribe-auth/A25WCZ43CZSX7KNOJBKXYDLZ5IKCFAVCNFSM6AAAAABHFIYXKKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMZXGM4TSMZWGA . You are receiving this because you were mentioned.Message ID: @.***>
There is a memory limit edge function provides, image size should be in that constrained.
On Sun, Oct 27, 2024, 14:25 Minkesh Jain @.***> wrote:
Another thing to make sure is file size is not too large. Because of that also this this issue comes up.
On Fri, Oct 25, 2024, 15:38 Jishnu @.***> wrote:
I don't think I will able top to post the code snippet here. But I can guarantee you that the extension is not the issue. I have tried it with all possible extensions ( jpg, jpeg, png) and not webp because satori doesn't have support for that format yet.
— Reply to this email directly, view it on GitHub https://github.com/vercel/satori/issues/613#issuecomment-2437399360, or unsubscribe https://github.com/notifications/unsubscribe-auth/A25WCZ43CZSX7KNOJBKXYDLZ5IKCFAVCNFSM6AAAAABHFIYXKKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMZXGM4TSMZWGA . You are receiving this because you were mentioned.Message ID: @.***>
@minkesh-pidilite , That too doesn't seems like the issue as I do have a vercel pro subscription.
That doesn't matter, i do have it too. Try with smaller image once
On Tue, Oct 29, 2024, 21:42 Jishnu @.***> wrote:
@minkesh-pidilite https://github.com/minkesh-pidilite , That too doesn't seems like the issue as I do have a vercel pro subscription.
— Reply to this email directly, view it on GitHub https://github.com/vercel/satori/issues/613#issuecomment-2444737592, or unsubscribe https://github.com/notifications/unsubscribe-auth/A25WCZZHZDPZEO2MQZAYKV3Z56XXBAVCNFSM6AAAAABHFIYXKKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBUG4ZTONJZGI . You are receiving this because you were mentioned.Message ID: @.***>
I don't recommend this solution at all, but if you need a temporary solution this is what I've done:
import path from "path";
import fs from "fs/promises";
// inside a component:
const imagePath = path.join(process.cwd(), some, path, to, image);
const imageBuffer = await fs.readFile(imagePath);
const base64Image = imageBuffer.toString("base64");
const source = `data:image/png;base64,${base64Image}`;
return (
// some more code
<img src={source} />
// code
)
Limitations with the code above:
- no edge runtime(cant import file, fs, or use process)
- really poor quality, but that could just be me
change "image/png" to proper image type in source
I also tried solution here, but that just errored but didn't show any error code, so I'm just leaving it here. https://github.com/vercel/satori/issues/626#issuecomment-2401402201
sometimes my images return 404's with content so it makes sense that it fails - but I'd rather it silently fail (with a fallback or nothing) than crash the entire image rendering. I suppose the workaround is to HEAD request the images before, but that creates a waterfall.
