Image blobs

Vi ønsket å ha litt mer kontroll når vi laster bilder i Unicad. Vi fant ut at vi kunne bruke blob-urls. Det gjør at man kan laste ned et bilde med fetch, og så generere en URL som kan vises i en img-tag. En av grunnene var at vi ikke ville at brukeren skulle ha få URLer med potensielt sensitivt innhold liggende rundt.

For å laste ned bildet gjør man noe slikt:

async function fetchImageAsBlobUrl(src: string) {
    let image = await fetch(src);
    if (image.status !== 200) {
        throw new Error('Could not fetch image');
    }
    let blob = await image.blob();
    return URL.createObjectURL(blob);
}

Resultatet er en url som man kan gi som src til en img-tag (dette er eksempelkode som ikke virker. Tilpass det til ditt favorittrammeverk):

let src = await fetchImageAsBlobUrl();

<img loading="lazy" src={src} />;

Urlen blir seende omtrent slik ut: blob:https://example.com/a8735f9e-d55d-4dd9-a78a-4822c2291815. En ting som er fint er at “Open in new tab” fremdeles virker, og brukeren kan for eksempel lagre bildet. Samtidig er det ikke mulig å dele urlen videre til andre.