Cannot find way to display the image

[HeisenbergK]

Hello,

I am writing a frontend in react for my instrument, which will display fits files, created by the instrument.

The files have 4 frames in 1 data unit in 1 HDU.

I have only found this library to read fits files in javascript properly (JS9 wouldn't work for the love of God).

Right now I have the following callback after reading the image file:

var hdu = this.getHDU();
var array1 = new Uint8Array(hdu.data.frameOffsets[0].buffers[0]);
setFrame1(new Blob([array1.buffer], { type: "image/png" }));
var array2 = new Uint8Array(hdu.data.frameOffsets[1].buffers[0]);
setFrame2(new Blob([array2.buffer], { type: "image/png" }));
var array3 = new Uint8Array(hdu.data.frameOffsets[2].buffers[0]);
setFrame3(new Blob([array3.buffer], { type: "image/png" }));
var array4 = new Uint8Array(hdu.data.frameOffsets[3].buffers[0]);
setFrame4(new Blob([array4.buffer], { type: "image/png" }));

It works nicely and I am getting the frame arrays, that I have verified. But when I set the img components as such:

<img src={URL.createObjectURL(frame1)} alt={"test1"} loading="lazy" />
<img src={URL.createObjectURL(frame2)} alt={"test2"} loading="lazy" />
<img src={URL.createObjectURL(frame3)} alt={"test3"} loading="lazy" />
<img src={URL.createObjectURL(frame4)} alt={"test4"} loading="lazy" />

It only displays a broken image symbol.

I am sure I am missing something too obvious, but please some help will be greatly appreciated.