Type 'ArrayBuffer' is not assignable to type 'string'. when using local image.

[adriangalilea]

Bug report

Following the example to use a local file I get:

Type 'ArrayBuffer' is not assignable to type 'string'.ts(2322)
index.d.ts(2869, 9): The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'

Seems to work fine tho

Reproduction

Following the guide using local images

export async function GET(request: Request) {
  const imageData = await fetch(
    new URL("./logo-black.png", import.meta.url),
  ).then((res) => res.arrayBuffer());

  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          background: "#f6f6f6",
          width: "100%",
          height: "100%",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <img width="256" height="256" src={imageData} />
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
  
}

Additional Context

Latest next.js version and og/image

[souporserious]

I tried overriding the global JSX namespace to add the ArrayBuffer type, but couldn't get it to work. It's a little more verbose, but you can base64 it to turn it into a string to get around this type error:

<img
  width="256"
  height="256"
  src={`data:image/png;base64,${Buffer.from(imageData).toString('base64')}`}
/>

Not ideal, but alternatively you can use any:

<img src={imageData as any} />