I am trying to get IPFS-JS to download images, and display them in the browser. The use-case is serving images off of the IPFS network, and having a browser directly fetch it from IPFS, instead of my servers.

I'm using webpack to compile Typescript to JS and run in the browser, and that all seems fine.

What I have so far is...

import {create} from 'ipfs-core'

let node = await create({});
let stream = node.cat("QmbEaXd4cy5nuCdLNgnprh2U83cwVgtZE4vFTCCwFkKzsp");
let imageData = "";
for await (const chunk of stream) {
   imageData += chunk.toString();
}
let imageBlob = new Blob([await imageData], {type: "image/png"});
let imageURL = URL.createObjectURL(imageBlob);
let imageObject = new Image();
imageObject.src = imageURL;
document.getElementById("browserImg")!.appendChild(imageObject);

But when I run this in the browser, I can see the file getting downloaded, and it does show what looks like a binary PNG file when I do a console.log(imageData); But in the browser window, I get the broken image icon, instead of the image that was downloaded. I'm not sure where the breakage is, as there seems to really be no error thrown.

I appreciate any advice or debugging steps yall might be able to provide