Next.js Discord

Discord Forum

Using Blob for ssr next/image

Answered
gin posted this in #help-forum
Open in Discord
ginOP
Is it possible to use URL.createObjectURL and blob in a serverside component?
example:
const topvoterResponse= await fetch(`https://visage.surgeplay.com/bust/256/${top[0].username}`, {
        headers: {
            "User-Agent": "example",
        }
    });
    const blob = await topvoterResponse.blob() as Blob;

    const topvoterImg = URL.createObjectURL(blob);


if i do it like that the Image is not displaying.
<img alt="top1" width="100" height="100" decoding="async" data-nimg="1" style="filter: drop-shadow(rgba(0, 0, 0, 0.314) 5px 2px 2px);" src="blob:nodedata:71663248-2068-4eaf-9cd8-372f760cabb0">

This is the rendered component
Answered by gin
const topvoterResponse= await fetch(`https://visage.surgeplay.com/bust/256/${top[0].username}`, {
        headers: {
            "User-Agent": "example",
        },
        cache: "force-cache",
    });
    const buffer = await topvoterResponse.arrayBuffer();
    const topvoter = Buffer.from(buffer).toString('base64');

fixed the problem using buffer
View full answer

2 Replies

ginOP
Blob is 
Blob { size: 11888, type: 'image/webp' }
ginOP
const topvoterResponse= await fetch(`https://visage.surgeplay.com/bust/256/${top[0].username}`, {
        headers: {
            "User-Agent": "example",
        },
        cache: "force-cache",
    });
    const buffer = await topvoterResponse.arrayBuffer();
    const topvoter = Buffer.from(buffer).toString('base64');

fixed the problem using buffer
Answer