Display image fetched from JSON responce in REACT

Question

In my application i need to show multiple images that are loaded from the server on a client side.

This is the server response generating code(ASP.NET Core):

    //Create list of thumbnails
    List<Object> thumbnails = new List<Object>();

    foreach (ClosingDocument DItem in PackageConent.Documents)
    {
        DItem.GetPDFDocument();

        Bitmap thumbnail = DItem.GetThumbnailPage(1);

        thumbnails.Add(thumbnail);
    }
    JArray JO = JArray.FromObject(thumbnails);

    response.Add(new JProperty("PdfDocuments", JO));

Then on a client side i do console.log(data.Package.PdfDocuments1);

and get the following:

But how do i convert it into something that i can put into the <img src="???">

if i do the following:

var dataUrl = window.URL.createObjectURL(data.Package.PdfDocuments[1]);

TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

I edited the server code to return Base64 encoded image.

now when i do

var blob = atob(data.Package.PdfDocuments[1]);
console.log(blob);

i get:

But when i try to convert in to URL like this:

var data = window.URL.createObjectURL(blob);

i still get:

TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Thanks!

@victorzadorozhnyy I updated the question to reflect your suggestion — AnKing, Nov 13 '18 at 19:54
have a read about canvas https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Examples — victor zadorozhnyy, Nov 13 '18 at 20:00
and this https://stackoverflow.com/questions/7650587/using-javascript-to-display-blob — victor zadorozhnyy, Nov 13 '18 at 20:01

score 0 · Answer 1 · answered Nov 14 '18 at 16:20

The issue I was having was due to the fact that i was trying to convert blob to an URL directly.

What I needed to do was to convert it to the proper file type first like this:

var blob = atob(page);
var file = new Blob(this.convertToByteArray(blob), { type: "image/png" });
var imageUrl = window.URL.createObjectURL(file);

convertToByteArray(input) {
    var sliceSize = 512;
    var bytes = [];

    for (var offset = 0; offset < input.length; offset += sliceSize) {
        var slice = input.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);

        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);

        bytes.push(byteArray);
    }

    return bytes;
}

Display image fetched from JSON responce in REACT

1 Answers1