Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@vercel/og and next/og: Can't load image: Unsupported image type: unknown #613

Open
shutock opened this issue May 3, 2024 · 11 comments
Open

Comments

@shutock
Copy link

shutock commented May 3, 2024

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

@clementAC
Copy link

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}/>.

@minkesh-pidilite
Copy link

Having the same issue, any updates on this ?

@jishnubmc
Copy link

Hi,
I am having the same issue on my hosted environment, but it works fine locally. Please help

@minkesh-pidilite
Copy link

My issue was fixed, there were couple of things

  1. You need an https endpoint to load the image
  2. The image should be publicly accesable and should not be corrupted.

After fixing these two things issue was automatically fixed.

@jishnubmc
Copy link

jishnubmc commented Oct 25, 2024

@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

@minkesh-pidilite
Copy link

In one the case the extension of the image was causing problems. Can you please post code snippet.

@jishnubmc
Copy link

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.

@minkesh-pidilite
Copy link

minkesh-pidilite commented Oct 27, 2024 via email

@minkesh-pidilite
Copy link

minkesh-pidilite commented Oct 27, 2024 via email

@jishnubmc
Copy link

@minkesh-pidilite , That too doesn't seems like the issue as I do have a vercel pro subscription.

@minkesh-pidilite
Copy link

minkesh-pidilite commented Oct 29, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants