Error: t is undefined when using base64-encoded image as background-image

[axeleroy]

Bug report

Description / Observed Behavior

I try to use a picture as background for OpenGraph images in Next.js though next/og's ImageResponse. Because of limitations when using the Node runtime for SSG, I tried using a base64-encoded image. I then encountered TypeError: a is not iterable. When I went to reproduce the issue on Satori's playground, I got another error: t is undefined.

Expected Behavior

Background should be shown as bellow:

Source

Reproduction

I had to past the URL in a Gist because it's too long and it hit GitHub's body limit 😓

https://gist.github.com/axeleroy/3817fab16f6e6b41769585bee045753b

[axeleroy]

While trying something else, I realized I had the image format wrong in my data:uri. Fixing it works on the playground, but unfortunately, I have another error in my Next.js project: TypeError: a is not iterable. I'm not sure if the issue is in @next/og or in Satori 🤔

[axeleroy]

Well, the issue seem to lie in the size of the picture: I just noticed that Buffer.toString() will cut the string if it exceeds MAX_STRING_LENGTH. Now I know!

[axeleroy]

Nope, that's not it: after shaking the length of Buffer.toString("base64") it's not even close to MAX_STRING_LENGTH. After a lot more search, it just happened to be that the mime type is jpeg not jpeg 😮‍💨