Error: Can't load image x: Failed to parse URL from x

[lancejpollard]

I have a basic @vercel/og configuration under api/social/index.tsx:

/* eslint-disable @next/next/no-img-element */
import React from 'react'
import { ImageResponse } from '@vercel/og'
import theme from '@configurations/theme'

export const config = {
  runtime: 'edge',
}

export default function handler() {
  const content = (
    <div
      style={{
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'center',
        textAlign: 'center',
      }}
    >
      <img
        src={theme.images.face}
        width={400}
        height={400 * 0.85}
        alt="Face"
      />
    </div>
  )

  const dimensions = {
    height: 640,
    width: 1280,
  }

  try {
    return new ImageResponse(content, dimensions)
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } catch (e: any) {
    if (e instanceof Error) {
      console.log(`${e.stack}`)
      return new Response(`Failed to generate the image`, {
        status: 500,
      })
    }
  }
}

First of all, I had to add /* eslint-disable @next/next/no-img-element */ to get rid of the native <img> use warning, how else can I avoid that in this file?

Second, main thing is, it's not loading my .png, which loads fine in my app. Here is the image for reference:

I am getting this in the terminal:

error - Error: Can't load image /images/face.png: Failed to parse URL from /images/face.png
    at eval (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:16:3834)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

What am I doing wrong, and/or how to fix?

Thank you!

I tried using an absolute URL as well, it seems to work then only?

Error: Can't load image http://localhost:3000/images/face.png: fetch failed
    at eval (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:16:3834)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[leerob]

Closing in favor of #226