Myujth

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!

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;