etherCorps/sveltekit-og

Error: Cannot use relative URL (https//anything.io/cdn/images/283.75x0/90/o/none/8a7a0a5b3de759a1144a1286dec842d7) with global fetch

thomastraum opened this issue · 1 comments

thank you for this package, I ran into an issue works fine without the imageUrl

Describe the bug

Error: Cannot use relative URL (https//anything.io/cdn/images/283.75x0/90/o/none/8a7a0a5b3de759a1144a1286dec842d7) with global fetch — use `event.fetch` instead: https://kit.svelte.dev/docs/web-standards#fetch-apis

I have an url to my image I pass into the template. Complains that it wants to use the svelte fetch:

To Reproduce
Steps to reproduce the behavior:

import { ImageResponse } from '@ethercorps/sveltekit-og';
// import { RequestHandler } from './$types';

const createTemplate =(imageUrl) =>`
<div
  style="
    height: 100%;
    width: 100%;
    display: flex;
    flexDirection: column;
    alignItems: center;
    justifyContent: center;
    backgroundColor: #fff;
    fontWeight: 600;
    backgroundImage: url(${imageUrl});
    backgroundSize: cover;
    backgroundPosition: center;
    backgroundRepeat: no-repeat;"
>
  <div style="marginTop: 40px; fontSize: 32px;">search.anything.io</div>
  <div style="marginTop: 10px; fontSize: 16px;">For bad images go elsewhere</div>
</div>
`;

const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
const fontData = await fontFile.arrayBuffer();

export const GET = async () => {
  const imageUrl = "https://anything.io/cdn/images/283.75x0/90/o/none/8a7a0a5b3de759a1144a1286dec842d7";
  return await ImageResponse(createTemplate(imageUrl), {
		height: 250,
		width: 500,
		fonts: [
			{
				name: 'Inter Latin',
				data: fontData,
				weight: 400
			}
		]
	});
};

Desktop (please complete the following information):

  • OS: osx
  • Browser chrome
  • Version latest sveltekit

sorry my bad, closing this for now.