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
thomastraum commented
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
thomastraum commented
sorry my bad, closing this for now.