在REACT中显示从JSON响应中获取的图像

Question

在我的应用程序中，我需要显示从客户端的服务器加载的多个图像。

这是服务器响应生成代码（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));

然后在客户端我做 console.log（data.Package.PdfDocuments 1）;

并获得以下信息：

但是我如何将其转换为可以放入<img src="???">

的内容

如果我执行以下操作：

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

  

TypeError：无法在“ URL”上执行“ createObjectURL”：无功能   被发现与提供的签名相匹配。

我编辑了服务器代码以返回Base64编码的图像。

现在我做什么

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

我得到：

但是当我尝试将其转换为URL时：

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

我仍然得到：

  

TypeError：无法在“ URL”上执行“ createObjectURL”：找不到与提供的签名匹配的功能。

谢谢！

Answer 1

我遇到的问题是由于我试图将blob直接转换为URL。

我需要做的是先将其转换为正确的文件类型，如下所示：

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;
}