@vercel/og Error: Unsupported Image Type

[odiseo0]

As it says in the title, the problem is related to @vercel/og and not to this repository as such, but I don't know any other place to ask.

I am using ImageResponse to generate the image as it says in the documentation, everything works fine, the problem starts when I try to use an image that is not either jpg/png. I want to use webp.

You can follow the instructions of the official docs for @vercel/og

Code I used:

import { ImageResponse } from '@vercel/og';


export const config = {
  runtime: 'experimental-edge',
};

export default function handler() {
  return new ImageResponse(
    (
      <img
        alt="Vercel"
        height={200}
        src="https://via.placeholder.com/302"
        style={{ margin: '0 30px' }}
        width={232}
      />        
    ),
  );

You'll get a blank page and in the terminal you should see:

Error: Can't load image https://via.placeholder.com/302: Unsupported image type: unknown
    at eval (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:16:2973)

My questions are, what are the supported image types? If there a way to make ImageResponse accept webp? and have anyone else faced this issue, if you did, what were your solutions? Thanks

[itbruno]

Hey @odiseo0 i faced this issue and was solved putting the image extension after url.

Try switch https://via.placeholder.com/302 by https://via.placeholder.com/302.png (ps.: placeholder.com api accepts extensions)

export default function handler() {
  return new ImageResponse(
    (
      <img
        alt="Vercel"
        height={200}
        src="https://via.placeholder.com/302.png"
        style={{ margin: '0 30px' }}
        width={232}
      />        
    ),
  );

[odiseo0]

Hi @itbruno, thanks for the response. I was looking to use webp instead of png or jpg.

I didn't know that placeholder.com accepted extensions, thanks for that too.

[itbruno]

@odiseo0 Satori haven't webp support yet. Can you see the issue #273 about this point

[odiseo0]

Thanks for the help, I'll leave the issue open for a while in case someone have some sort of solution

[digitaltopo]

I'm seeing the error Unsupported image type: unknown for .png images. I've both backgroundImage and an <img src> tag. Any thoughts on why this would be happening?