Images With Height/Width of 0

[wilgaboury]

Sometimes when retrieving images and turning them into blobs and scaling and cropping they will have a height/width of 0. This makes the loader go on forever.

example url which does this: https://asteriskmag.com/issues/1/the-illogic-of-nuclear-escalation?utm_source=substack&utm_medium=email

[wilgaboury]

Turns out this is caused by svgs which doesn't play nicely with some of the image processing utility code. I think the best way to handle this moving forward is going to be to rework the image processing pipeline in utils.ts. Instead of passing everything around as an HTMLImageElement it would be better to retrieve and pass around a blob because blobs easily hold svg data and have mime information attached to easily identify the format. Then everything would operate on blobs turning it into an image when needed to rescale, get size info, etc.

async function getImageBlob(imageUrl) {
    const response = await fetch(imageUrl)
    return response.blob()
}