Failed to create og image: Image source must be an absolute URL

[xdeq]

Describe the bug

Hi!

Pre-rendering of og images breaks with an error

[log] [nitro] ├─ /docs/__og_image__/og.png (4447ms) (Error: [500] Failed to create og image: Image source must be an absolute URL: undefined/_nuxt/grid.2e3d6f79.png?1691144911540)

• Locally, everything works
• Local build builds without errors
• Cloudflare Pages

In nuxt.config.js:

ogImage: { fonts: ["Montserrat:500", "Inter:400"], }

Also:

site: { url: process.env.NUXT_SITE_URL, },

Reproduction

No response

System / Nuxt Info

No response

[xdeq]

Okay, I figured it out, it was my inattention

For those facing a similar problem:

• In the custom component (components -> OgImage -> Custom.vue), I used an img for the background

<img src="@/assets/grid.png" />

• But in the docs for those who use Satori - Relative image support (you should link images from your public directory /my-image.png)

• Therefore, all you need to do is move the image you are using to a public dir

<img src="/grid.png" />

• Also, the Satori docs suggests using base64 images