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 Error: Unsupported Image Type #311

Closed
odiseo0 opened this issue Nov 15, 2022 · 8 comments · May be fixed by #622
Closed

@vercel/og Error: Unsupported Image Type #311

odiseo0 opened this issue Nov 15, 2022 · 8 comments · May be fixed by #622

Comments

@odiseo0
Copy link

odiseo0 commented Nov 15, 2022

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
Copy link

itbruno commented Nov 16, 2022

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}
      />        
    ),
  );

@styfle styfle transferred this issue from vercel/og-image Nov 16, 2022
@odiseo0
Copy link
Author

odiseo0 commented Nov 16, 2022

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
Copy link

itbruno commented Nov 16, 2022

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

@odiseo0
Copy link
Author

odiseo0 commented Nov 18, 2022

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

@odiseo0 odiseo0 closed this as completed Nov 21, 2022
@digitaltopo
Copy link

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?

@kodiyak
Copy link

kodiyak commented Aug 17, 2024

You can use this approach to temporarily solve this problem:

import axios from 'axios'
import sharp from 'sharp';

const getImageBase64 = async (url: string) => {
  return axios.get<ArrayBuffer>(url, {
    responseType: 'arraybuffer',
  }).then(async (res) => {
    const buffer = await sharp(res.data).toFormat('png').toBuffer()
    return {
      url: `data:${'image/png'};base64,${buffer.toString('base64')}`,
    };
  })
}

Then use

const image = await getImageBase64('https://via.placeholder.com/302.png')

return new ImageResponse(<img src={image.url} />)

@kenjinp
Copy link

kenjinp commented Oct 23, 2024

You can use this approach to temporarily solve this problem:

@kodiyak This workaround isn't possible in edge environments because sharp relies on child_process, it's probably not suitable for many vercel/og usecases

@jishnubmc
Copy link

Hi,
I am facing same issue. Is there a better work around for this that work on edge functions. The fun fact is that I can render images in all format without any issue locally but gives issue when hosted on vercel.

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

Successfully merging a pull request may close this issue.

6 participants